집 > 기사 > 웹 프론트엔드 > Angular에서 더 나은 스크롤 플러그인을 사용하는 방법 소개

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

不言원래의: 2018-06-30 16:56:521606검색

이 글은 Angular에서 더 나은 스크롤 플러그인을 사용하는 방법을 주로 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

better-scroll의 사용

고정된 높이에서 무한 스크롤을 해야 하기 때문에 원래 CSS Overflow-y도 완성할 수 있지만 안드로이드는 그다지 매끄럽고 딱딱하지 않습니다. 즉, 제3자가 사용되는 라이브러리 더 나은 스크롤은 각도의 ng 콘텐츠와 함께 작동합니다. 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>

listscroll 컴포넌트를 다른 컴포넌트에 사용하세요

import { Component, OnInit, Input, ElementRef, ViewChild } from &#39;@angular/core&#39;;
declare let BScroll;
@Component({
 selector: &#39;app-listscroll&#39;,
 templateUrl: &#39;./listscroll.component.html&#39;,
 styleUrls: [&#39;./listscroll.component.css&#39;]
})
export class ListscrollComponent implements OnInit {

 @ViewChild(&#39;scroll&#39;) 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);
 }

}

Summary

이렇게 사용하면 better-scroll을 간단하게 완성할 수 있습니다. 물론 better-scroll에도 여러 가지가 있습니다. 풀업 및 풀다운 로드, 캐러셀 이미지 만들기 등에 대한 자세한 내용은 공식 문서를 참조하세요.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

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

관련 기사