angular7中使用better-scroll实现滚动功能

地址

https://www.npmjs.com/package/better-scroll
https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/api-specific.html

安装

npm install better-scroll --save
npm install better-scroll @types/better-scroll --save

使用要求

根据官方的文档可以看出，better-scroll对dom的结构是有要求的，最外层的wrapper那一层是需要固定高度的，里面那一层content是根据内容的高度来撑起的。

<div class="scroll" #scroll>
 	 <ng-content></ng-content>
</div>

引入 BScroll并初始化

import BScroll from 'better-scroll';

export class VideoReportComponent implements OnInit {

    @ViewChild('scroll') scrollEl: ElementRef;

    public scroll;

    constructor() {}

    ngOnInit() {
        // 设置高度
        this.scrollEl.nativeElement.style.height = `${600}px`;

        // 初始化
        setTimeout(() => {
            this.scroll = new BScroll(this.scrollEl.nativeElement, {click: true});
        }, 20);
    }

}

效果