이번에는 프로젝트에서 better-scroll 플러그인을 사용하는 방법과 better-scroll 플러그인을 사용할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.
better-scroll 사용
무한 스크롤은 고정된 높이에서 이루어져야 하기 때문에 원래 CSS Overflow-y도 가능합니다. 하지만 안드로이드는 그다지 부드럽고 뻣뻣하지 않기 때문에 타사 라이브러리를 사용하는 것이 좋습니다. 더 나은 스크롤을 사용하면 Angle의 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: Angle-cli에 도입
목록 스크롤 구성 요소 작성
공식 문서에 따르면 better-scroll에는 DOM 구조에 대한 요구 사항이 있으며 가장 바깥쪽 래퍼 레이어는 고정 높이를 가져야 하며 콘텐츠의 내부 레이어는 높이에 따라 지원됩니다. 콘텐츠.
html 부분:
<p class="scroll" #scroll> <ng-content></ng-content> </p>
ng-content는
comComponent.ts part
1: import에 BScroll이 도입됨
2: OnInit 후크에서 초기화됩니다. OnInit 시점에 ngFor가 아직 실행이 완료되었으므로 이를 지연시키기 위해 타이머를 추가합니다.
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>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
Vue.js로 로그인 양식 코드를 사용자 정의하는 방법
위 내용은 프로젝트에서 더 나은 스크롤 플러그인을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!