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!
Mastering the Command Line for JavaScript DevelopersJul 24, 2025 am 03:59 AMMaster basic but in-depth command line skills: proficient in using Tab completion, history, Ctrl R search, pwd positioning and ls-la to view hidden files; 2. Efficiently use Node.js and package manager: make good use of npminit-y, --save-dev, npx without installation and operation, npmrun scripts and outdated inspection, and optimize pnpm speed up; 3. Accurate search code and log: combine grep-r/-i, find files, jq formatted JSON and xargs to find JS files with specific content; 4. Write simple script automation tasks: such as deploy.sh one-click deployment, chmod x grant execution rights; 5. Custom Sh
How to check if a variable is an array in JS?Jul 24, 2025 am 03:58 AMTo determine whether the variable is an array type, the Array.isArray() method is preferred, and secondly, Object.prototype.toString.call() can be used. 1.Array.isArray(variable) returns true or false, suitable for modern browsers and Node.js; 2.Object.prototype.toString.call(variable)==='[objectArray]', compatible with old environments. Avoid using typeof and instanceof because they have flaws in judging arrays. Choose the right method according to your needs: Priority is given if there is no need to be compatible with old versions
JavaScript Dependency Management StrategiesJul 24, 2025 am 03:58 AMKeep dependency version consistent, update dependencies regularly, distinguish dependencies types, and use Monorepo to manage multi-project dependencies. 1. Use package-lock.json or yarn.lock to submit to Git to ensure environmental consistency; 2. Check the dependency tree regularly to avoid duplicate installation and conflicts; 3. Use npmoutdated or yarnoutdated to check for updates, prioritize security issues and evaluate the impact of major version upgrades; 4. Clearly distinguish dependencies and devDependencies to avoid misinstalling development tools in the production environment; 5. Use tools such as Lerna or Nx to uniformly manage shared dependencies and code of multiple projects to improve collaboration efficiency.
Advanced JavaScript Testing Strategies with Jest and PlaywrightJul 24, 2025 am 03:56 AMUse Jest's MockFunctions and Timers to control asynchronous behavior, and improve testing efficiency through jest.fn() and jest.useFakeTimers(); 2. Use Fixtures and PageObjectModel (POM) in Playwright to improve maintainability and encapsulate common operations and page logic; 3. Jest and Playwright can jointly achieve comprehensive coverage of unit tests and end-to-end tests; 4. Playwright's TraceViewer can be used to intuitively debug failed tests. These strategies respectively optimize testing efficiency, code structure, test level coverage and debugging capabilities, and are suitable for complex projects
How to Use Bun: The All-in-One JavaScript ToolkitJul 24, 2025 am 03:54 AMBun is a modern JavaScript runtime that can replace tools such as Node.js, npm and Webpack. Its core advantage lies in speed. 1. Bun is built on Zig, using the JavaScriptCore engine, which can directly run JavaScript and TypeScript files without additional configuration; 2. It has a built-in package manager, supports installation dependencies from npm, and speeds are 10-100 times faster than npm, and generates bun.lockb lock files; 3. Built-in native packager, supports minimization, environment variables, code segmentation and other functions, which can replace Webpack or esbuild; 4. Provides a quick test runner with Jest syntax, automatically searching
Real-time Communication with JavaScript WebSocketsJul 24, 2025 am 03:50 AMTo achieve real-time communication, the key to using JavaScript's WebSocket is to understand its basic usage and common scenarios. 1. Only one line of code is required to establish a connection: constsocket=newWebSocket('ws://example.com/socket');, using open, message, error, and close events to handle the connection status; 2. Send and receive data in JSON format, send through socket.send(), listen to message events to receive and parse data; 3. Handle disconnection and reconnection, you can automatically reconnect by listening to close and error events, combined with setTimeout,
ES Modules vs. CommonJS: A Detailed ComparisonJul 24, 2025 am 03:50 AMESModules (ESM) and CommonJS are two module systems of JavaScript. The main differences are syntax, loading mechanism, execution timing, environment support and interoperability. 1. Syntax, ESM uses import/export static declaration, and CommonJS uses require()/module.exports to dynamically assign values. 2. In terms of loading mechanism, ESM supports static analysis and tree-shaking. CommonJS is dynamically loaded at runtime, with high flexibility but not conducive to optimization. 3. In execution time, ESM can obtain the latest value through real-time binding; CommonJS cache module output may return part
Advanced Error Handling Strategies in JavaScript and Node.jsJul 24, 2025 am 03:47 AMDefinecustomerrorclasseslikeValidationErrorandDatabaseErrortoenablepreciseerrorhandlingusinginstanceofandimproveloggingconsistency.2.Usecentralizederror-handlingmiddlewareinExpress.jsbypassingerrorstonext()anddefiningaglobalerrorhandlertostandardizer


Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 Chinese version
Chinese version, very easy to use

WebStorm Mac version
Useful JavaScript development tools

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Mac version
God-level code editing software (SublimeText3)

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment







