Detailed explanation on how to use the better-scroll plug-in (with code)

This time I will bring you a detailed explanation of the use of the better-scroll plug-in (with code), and what are the precautions when using the better-scroll plug-in. The following is a practical case, let's take a look.

Use of better-scroll

Since infinite scrolling needs to be done at a fixed height, the original css overflow-y can also be completed Yes, but Android is not very smooth and 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.

Installationbetter-scroll

1: npm install better-scroll --save

2: Installation type npm install better-scroll @types/better-scroll --save

3: Introduce

listscroll component writing in angular-cli

According to the official It can be seen from the documentation that 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 is also available. For many functions, you can rely on it for pull-up and pull-down loading, carousel images, etc. For details, please refer to the official documentation.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to use el expression in js

ElTableColumn adds search summary function

The above is the detailed content of Detailed explanation on how to use the better-scroll plug-in (with code). For more information, please follow other related articles on the PHP Chinese website!