需求：
1、点击左侧分类菜单，右侧界面滑动到对应分类的第一个；
2、能嵌套在ng-Zorro的Drawer抽屉里面正常运行；
3、某个分类的对应内容不存在了，分类菜单要有提示；
版本：
angular ：7.1.0
ng-zorro-antd : 7.0.3
我这里分了两个page，test是主体，test2只是Drawer抽屉，没有做任何改动，直接上代码吧
test.html
<div nz-row>
<div nz-col nzSpan="6" class="box1">
<ul>
<li
[ngClass]="{'active': active === i}"
(click)="cl(item.value)"
*ngFor="let item of list, let i = index"
class="{{item.disabled?'disabled':''}}"
>
{{item.name}}
</li>
</ul>
</div>
<div
nz-col
nzSpan="18"
class="box2"
#box2
id="aa"
[ngStyle]="{height: height + 'px'}"
>
<ul>
<li class="a" *ngFor="let item of a">{{item}}</li>
<li class="b" *ngFor="let item of b">{{item}}</li>
<li class="c" *ngFor="let item of c">{{item}}</li>
<li class="d" *ngFor="let item of d">{{item}}</li>
</ul>
</div>
</div>
test.scss
ul {
display: block;
border: 1px solid #000;
li {
padding: 10px;
border-bottom: 1px solid #000;
}
}
.box1 {
ul {
li {
&.disabled {
background: #ccc;
cursor: no-drop;
opacity: 0.5;
}
&.active {
background: #ccc;
}
}
}
}
.box2 {
height: 400px;
overflow-y: scroll;
}
test.ts
import {
Component,
OnInit,
ViewChild,
ElementRef,
AfterViewInit,
ChangeDetectorRef
} from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { reject } from 'q';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, AfterViewInit {
a = [1, 1, 1, 1, 1, 1, 1, 1, , 1, 1, 1, 1, 1, 1];
b = [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2];
c = [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3];
d = [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4];
@ViewChild('box2') box2;
active = 0;
heightArr = [];
// 左侧菜单栏（需要手动配置的参数，上下文关系name必须class保持一致）
list = [
{
name: 'a',
value: 0,
disabled: false
},
{
name: 'b',
value: 0,
disabled: false
},
{
name: 'c',
value: 0,
disabled: false
},
{
name: 'd',
value: 0,
disabled: false
}
];
// 55 是Drawer抽屉的title的高度，48 是Drawer抽屉的padding高度，根据实际情况自己配置
height = window.innerHeight - 55 - 48;
constructor(private el: ElementRef, private cdref: ChangeDetectorRef) {}
ngOnInit() {}
ngAfterViewInit() {
const classNameArr = [];
this.list.map(r => {
classNameArr.push('.' + r.name);
});
classNameArr.map((r, i) => {
if (!this.getFirstNode(r)) {
this.list[i].disabled = true; // 当页面某个class不存在的时候设置不可操作状态（用于某一个类型的数据不显示的时候）
this.cdref.detectChanges(); // 这个必须加，不加会报错
}
this.list[i].value = this.getFirstNode(r);
this.heightArr.push(this.getFirstNode(r));
});
this.scrollListen();
}
// 左侧菜单点击事件
cl(n) {
const nowScrollTop = this.box2.nativeElement;
nowScrollTop.scrollTo({
top: n,
behavior: 'smooth'
});
}
// 滚动监听
scrollListen() {
const nowScrollTop = this.box2.nativeElement;
fromEvent(nowScrollTop, 'scroll')
.pipe(debounceTime(30)) // 防抖 （如果你想要更加丝滑的效果直接吧防抖去掉吧）
.subscribe(event => {
const st = event['target'].scrollTop;
this.active = this.scrollFindIndex(st, this.heightArr);
});
}
// 获取样式组的第一个的offsetTop
getFirstNode(className) {
const arr = [].slice
.call(document.querySelectorAll(className))
.map(t => t.offsetTop);
return arr[0];
}
// 判断值在数组的那个区域内
scrollFindIndex(val, arr) {
let r;
// 当某一个class不存在的时候做出跳过处理
arr.map((t, i) => {
if (t === undefined || t === 0) {
arr[i] = this.findNextNode(arr, i);
}
});
console.log(arr);
const n = arr.findIndex(el => el > val) - 1;
switch (n) {
case -1:
r = 0;
break;
case -2:
r = arr.length - 1;
break;
default:
r = n;
break;
}
return r;
}
// 递归寻找下个有值的（我的具体情况最后一个是一定有值，其他情况自己改下吧）
findNextNode(arr, i) {
let node;
if (arr[i]) {
node = arr[i];
} else {
node = this.findNextNode(arr, i + 1);
}
return node;
}
}
test2直接按文档来就好了。
image
效果：
image.png
接下来我们模拟下其中一组数据没有显示，把其中一行代码注释了就好了
image.png
image.png
