この記事では、Angular での better-scroll プラグインの使用方法を主に紹介します。内容が非常に優れているので、参考として共有します。
better-scrollの使い方
無限スクロールは固定高で行う必要があるため、本来はCSSのoverflow-yでも完結できるのですが、Androidはあまりスムーズではなく硬い、つまりサードパーティ製ではありません。ライブラリ better-scroll は angular の ng-content で動作します。 Angular の ng-content は Vue のスロットに非常に似ており、一部の不確実なコンテンツが ng-content を通じて投影される可能性があります。
better-scrollのインストール
1: npm install better-scroll --save
2: タイプのインストール npm install better-scroll @types/better-scroll --save
3: angular-cliで導入
listsscroll コンポーネントの記述
公式ドキュメントによると、better-scroll には DOM 構造の要件があり、最も外側のラッパー層は固定の高さを持つ必要があり、コンテンツの内側の層はその高さに応じてサポートされます。コンテンツ。
html パート:
<p class="scroll" #scroll> <ng-content></ng-content> </p>
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() { // 设置高度 this.scrollEl.nativeElement.style.height = `${this.height}px`; // 初始化 setTimeout(() => { this.scroll = new BScroll(this.scrollEl.nativeElement, {click: true}); }, 20); } }
<app-listscroll [height]="height"> <ul> <li class="item" *ngFor="let item of list; let num = index;">第{{num}}个</li> </ul> </app-listscroll>
まとめ
このように、better-scrollは使うだけで完成します もちろん、better-scrollにもたくさんあります。プルアップやプルダウンの読み込み、カルーセル画像の作成など、詳細は公式ドキュメントを参照してください。 vux アップローダー画像アップロード コンポーネントのインストールと使用方法について
vue を使用してアプリ スキャフォールディング ツールを迅速に開発する方法
以上がAngularでBetter-Scrollプラグインを使う方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。