Angular中使用better-scroll插件的方法
better-scroll的使用
由于需要在一個固定的的高度做無限滾動，本來css的overflow-y也可以完成的，奈何安卓不是很流暢，還很生硬，就是用了第三方庫better-scroll，配合angular的ng-content。angular的ng-content和vue的插槽很像，里面一些不確定的內(nèi)容可以通過ng-content投影進去。
安裝better-scroll
1: npm install better-scroll --save
2: 安裝types npm install better-scroll @types/better-scroll --save
3：在angular-cli里面引入
listscroll組件的編寫
根據(jù)官方的文檔可以看出，better-scroll對dom的結(jié)構(gòu)是有要求的，最外層的wrapper那一層是需要固定高度的，里面那一層content是根據(jù)內(nèi)容的高度來撐起的。
html部分：
<div class="scroll" #scroll> <ng-content></ng-content> </div>
ng-content就是要投影進來的內(nèi)容
component.ts部分
1: import引入 BScroll
2：在OnInit這個鉤子里面來初始化，由于OnInit的時候，ngFor還沒執(zhí)行完畢，所以就加了一個定時器來延遲。
import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core';
declare let BScroll;
@Component({
selector: 'app-listscroll',
templateUrl: './listscroll.component.html',
styleUrls: ['./listscroll.component.css']
})
export class ListscrollComponent implements OnInit {
@ViewChild('scroll') scrollEl: ElementRef;
@Input()
private height: number;
public scroll;
constructor() { }
ngOnInit() {
// 設(shè)置高度
this.scrollEl.nativeElement.style.height = `${this.height}px`;
// 初始化
setTimeout(() => {
this.scroll = new BScroll(this.scrollEl.nativeElement, {click: true});
}, 20);
}
}
在其他組件里面使用listscroll組件
<app-listscroll [height]="height">
<ul>
<li class="item" *ngFor="let item of list; let num = index;">第{{num}}個</li>
</ul>
</app-listscroll>
總結(jié)
這樣better-scroll簡單的使用就完成，當(dāng)然better-scroll還有很多功能，可以依賴它做上拉和下拉的加載，做輪播圖等等，具體可參考官方的文檔。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJs是一個不錯的用于開發(fā)SPA應(yīng)用（單頁Web應(yīng)用）的框架。通過本文給大家介紹angularjs基礎(chǔ)教程，需要的朋友要求學(xué)習(xí)吧2016-04-04
下面小編就為大家?guī)硪黄獪\談Angular中ngModel的$render。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標(biāo)達到目的地之前對其進行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器，每個攔截器都是實現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。2016-12-12
這篇文章主要介紹了AngularJS自定義控件,結(jié)合實例形式詳細分析了AngularJS自定義指令與模板操作的相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要為大家纖細介紹了AngularJS directive返回對象屬性的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下2016-03-03
本篇文章主要介紹了angular中的cookie讀寫方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
angularJS實現(xiàn)表格部分列展開縮起示例代碼
這篇文章主要介紹了angularJS實現(xiàn)表格部分列展開縮起示例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09
這篇文章主要介紹了AngularJS實現(xiàn)的簡單拖拽功能,涉及AngularJS事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了淺談angularJS 作用域的相關(guān)資料,需要的朋友可以參考下2015-07-07
本文給大家介紹AngularJS控制器繼承自另一控制器的相關(guān)內(nèi)容，小編認為介紹的非常不錯，具有參考借鑒價值，感興趣的朋友參考下吧2016-05-05