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