Introduction to the method of using better-scroll plug-in in Angular

This article mainly introduces how to use the better-scroll plug-in in Angular. The content is quite good. I will share it with you now and give it as a reference.

The use of better-scroll

Since infinite scrolling needs to be done at a fixed height, the overflow-y of CSS can also be completed, but what happens? Android is not very smooth and is still very stiff, so it uses the third-party library better-scroll and cooperates with Angular's ng-content. Angular's ng-content is very similar to Vue's slot, and some uncertain content can be projected into it through ng-content.

Install better-scroll

1: npm install better-scroll --save

2: Install types npm install better-scroll @types/ better-scroll --save

3: Introduce

listscroll component writing in angular-cli

According to the official documentation, better-scroll has requirements for the DOM structure. The outermost wrapper layer needs to have a fixed height, and the inner layer of content is supported according to the height of the content.

html part:

<p class="scroll" #scroll>
 <ng-content></ng-content>
</p>

ng-content is the content to be projected in

component.ts part

1: import introduces BScroll

2: Initialize in the OnInit hook. Since OnInit, ngFor has not yet completed execution, so a timer is added to delay .

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

}

Use the listscroll component in other components

<app-listscroll [height]="height">
 <ul>
   <li class="item" *ngFor="let item of list; let num = index;">第{{num}}个</li>
 </ul>
</app-listscroll>

Summary

In this way, better-scroll can be easily used. Of course, better-scroll also has many functions. You can rely on it to load pull-down and pull-down images, make carousel images, etc., which can be Refer to the official documentation.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About how to install and use the vux uploader image upload component

How to quickly develop apps with vue Scaffolding tools

The above is the detailed content of Introduction to the method of using better-scroll plug-in in Angular. For more information, please follow other related articles on the PHP Chinese website!