프로젝트에서 더 나은 스크롤 플러그인을 사용하는 방법

이번에는 프로젝트에서 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JSON 형식을 사용하여 POST 요청을 보내는 방법

Vue.js로 로그인 양식 코드를 사용자 정의하는 방법

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