CSS overflow-Y can also be used for infinite scrolling at a fixed height, but Android uses a third-party library, better Scroll, in conjunction with Angular’s ng-Content. Angular ng-content is like a slot in Vue, in that ng-content can project undefined content into it.

Install the better – scroll

1: NPM install better-scroll –save 2: install types NPM install better-scroll @types/better-scroll –save 3: import angular-CLI

Listscroll component preparation

According to the official document, Better-Scroll has requirements on DOM structure. The wrapper layer at the outermost layer needs a fixed height, and the content layer inside should be held up according to the height of the content. HTML part:

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

Copy the code

Ng-content is what you want to project in

Component. The ts part

1: import BScroll 2: OnInit hook to initialize, because OnInit, ngFor is not finished, so we add a timer 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() {/ / set the height this. ScrollEl. NativeElement. Style. The height = `${this.height}px`; / / initializationsetTimeout(() => {
   this.scroll = new BScroll(this.scrollEl.nativeElement, {click: true}); }, 20); }// Welcome to join the front-end full stack development communication circle to learn and communicate: 864305860 // For 1-3 years of front-end personnel}// help break through technical bottlenecks and improve thinking abilityCopy the code

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>Copy the code

In conclusion, the simple use of Better Scroll is completed. Of course, Better Scroll has many other functions, you can rely on it to load up and down, and do rotation graph, etc. For details, please refer to the official documents.

conclusion

Thank you for watching, if there are shortcomings, welcome to criticize.

We recommend you a free learning group, which covers mobile application website development, CSS, HTML, Webpack, Vue Node Angular and interview resources. Students interested in web development technology, welcome to join Q group: 864305860, no matter you are small white or Daniel I welcome, and Daniel organized a set of efficient learning routes and tutorials to share with you free, while updating video materials every day. In the end, I wish you all success as soon as possible, get satisfactory offer, fast promotion and salary increase, and walk on the peak of life.