이번에는 Angular에서 better-scroll 플러그인을 사용하는 단계에 대해 자세히 설명하겠습니다. Angular에서 better-scroll 플러그인을 사용할 때 주의사항은 무엇인가요? 봐.
더 나은 스크롤 사용
무한 스크롤은 고정된 높이에서 수행해야 하기 때문에 원래 CSS overflow-y도 수행할 수 있습니다. 그러나 Android는 그다지 부드럽고 뻣뻣하지 않기 때문에 세 번째 방법을 사용했습니다. . 타사 라이브러리는 각도의 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: 각도-cli에서
listscroll 구성 요소
의 작성 방법을 소개합니다. 공식 문서에 따르면 better-scroll에는 돔 구조에 대한 요구 사항이 있으며 가장 바깥쪽 래퍼 레이어에는 고정 높이가 있어야 합니다. 내부 레이어는 고정된 높이를 가져야 합니다. 콘텐츠는 콘텐츠 높이에 따라 지원됩니다.
html 부분:
<p class="scroll" #scroll> <ng-content></ng-content> </p>
ng-content는
comComponent.ts part
1: import에 BScroll이 도입됨
2: OnInit 후크에서 초기화됩니다. OnInit 시점에 ngFor가 아직 실행이 완료되었으므로 timer를 추가하여 지연시킵니다.
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에도 많은 기능이 있습니다. 풀업 및 풀다운 로딩, 휠 회전 등을 수행합니다. 자세한 내용은 공식 문서를 참조하세요.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
문자 대소문자 변환을 수행하는 Angular의 방법은 무엇입니까?
위 내용은 Angular에서 더 나은 스크롤 플러그인을 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!