Angular_AngularJS에서 더 나은 스크롤 플러그인을 사용하는 방법

이 글에서는 주로 Angular에서 더 나은 스크롤 플러그인을 사용하는 방법을 소개하고 참고용으로 공유합니다.

better-scroll의 사용

고정된 높이에서 무한 스크롤을 해야 하기 때문에 원래 CSS Overflow-y도 완성할 수 있지만 안드로이드는 그다지 매끄럽고 딱딱하지 않습니다. 즉, 제3자가 사용되는 라이브러리는 각도의 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 구조에 대한 요구 사항이 있으며 가장 바깥쪽 래퍼 레이어는 고정 높이를 가져야 하며 콘텐츠의 내부 레이어는 높이에 따라 지원됩니다. 콘텐츠. ㅋㅋㅋ 당시 ngFor는 실행이 완료되지 않았으므로 이를 지연시키기 위해 타이머가 추가되었습니다.

<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);
 }

}

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

라이브러리(프레임워크) 없이 직접 Ajax를 작성하는 방법에 대한 간략한 소개

Ajax 요청 결과에 대한 IE의 캐싱 문제에 대한 간략한 분석

403 오류가 발생할 때 해결하는 방법 Django는 ajax 포스트 데이터를 사용합니다

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