Angular에서 더 나은 스크롤 플러그인을 사용하는 단계에 대한 자세한 설명

이번에는 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의 방법은 무엇입니까?

apply 및 Math.max() 사용법과 차이점

위 내용은 Angular에서 더 나은 스크롤 플러그인을 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!