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

亚连
Release: 2018-05-28 17:23:19
Original
1558 people have browsed it

This article mainly introduces the method of using the better-scroll plug-in in Angular. Now I will share it with you and give you 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:

Copy after login

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); } }
Copy after login

Use the listscroll component in other components

 
  • 第{{num}}个
Copy after login

The above is I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

A brief introduction to writing ajax without a library (framework)

A brief analysis of IE's Ajax request results Caching problem

How to solve the 403 error when django uses ajax post data

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!