better-scroll的使用

成都創(chuàng)新互聯(lián)公司自成立以來，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個(gè)性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營(yíng)銷服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開發(fā)管理經(jīng)驗(yàn)、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團(tuán)隊(duì)及專業(yè)的網(wǎng)站設(shè)計(jì)師團(tuán)隊(duì)。

由于需要在一個(gè)固定的的高度做無限滾動(dòng)，本來css的overflow-y也可以完成的，奈何安卓不是很流暢，還很生硬，就是用了第三方庫(kù)better-scroll，配合angular的ng-content。angular的ng-content和vue的插槽很像，里面一些不確定的內(nèi)容可以通過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)容的高度來撐起的。

html部分：

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

ng-content就是要投影進(jìn)來的內(nèi)容

component.ts部分

1: import引入 BScroll

2：在OnInit這個(gè)鉤子里面來初始化，由于OnInit的時(shí)候，ngFor還沒執(zhí)行完畢，所以就加了一個(gè)定時(shí)器來延遲。

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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞標(biāo)題：Angular中使用better-scroll插件的方法
網(wǎng)址分享：http://jinyejixie.com/article14/pshdge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、Google、虛擬主機(jī)、微信公眾號(hào)、企業(yè)建站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)