How to use the better-scroll plug-in in the project

This time I will show you how to use the better-scroll plug-in in the project, and what are the precautions for 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, originally CSS overflow-y can also be completed, but Android is not very It's smooth, but still very stiff. 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 ngFor has not finished executing during OnInit, a timer is added to delay it.

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

Using 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>

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:

How to use JSON format to send POST requests

How to customize the operation login form code in Vue.js

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