Angular中better-scroll
时间：2023-04-04 23:52:01
HTML5
better-scroll的使用由于需要在固定高度做无限滚动，css的overflow-y也可以完成，但是Android不是很流畅很生硬，所以使用第三方库better-scroll配合angular的ng-content使用。Angular的ng-content和vue的slot很像，可以通过ng-content投射一些不确定的内容到里面。installbetter-scroll1:npminstallbetter-scroll--save2:Installtypesnpminstallbetter-scroll@types/better-scroll--save3:引入angular-cli中listscroll组件的编写根据官方文档，better-scroll对dom的结构有要求。最外层包裹层需要固定高度，内层内容根据内容高度撑起。html部分：
ng-content为要投影的内容component.tspart1:importBScroll2:在OnInit中初始化hook，因为在OnInit的时候ngFor还没有执行完，所以加了一个timer来delay。import{Component,OnInit,Input,ElementRef,ViewChild}from'@angular/core';declareletBScroll;@Component({selector:'app-listscroll',templateUrl:'./listscroll.component.html',styleUrls:['./listscroll.component.css']})exportclassListscrollComponentimplementsOnInit{@ViewChild('scroll')scrollEl:ElementRef;@Input()私有高度：数字；公共卷轴；constructor(){}ngOnInit(){//设置高度this.scrollEl.nativeElement.style.height=`${this.height}px`;//初始化setTimeout(()=>{this.scroll=newBScroll(this.scrollEl.nativeElement,{click:true});},20);}}在其他组件中使用listscroll组件
综上所述，better-scroll使用简单，当然better-scroll还有很多功能，你可以靠它做上拉拉-下载、轮播图等，具体请参考官方文档。
