Angular中使用better-scroll插件的方法

更新时间：2018年03月27日 09:52:40 作者：会飞的猪bzy

本篇文章主要介绍了Angular中使用better-scroll插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

better-scroll的使用

由于需要在一个固定的的高度做无限滚动，本来css的overflow-y也可以完成的，奈何安卓不是很流畅，还很生硬，就是用了第三方库better-scroll，配合angular的ng-content。angular的ng-content和vue的插槽很像，里面一些不确定的内容可以通过ng-content投影进去。

安装better-scroll

1: npm install better-scroll --save

2: 安装types npm install better-scroll @types/better-scroll --save

3：在angular-cli里面引入

listscroll组件的编写

根据官方的文档可以看出，better-scroll对dom的结构是有要求的，最外层的wrapper那一层是需要固定高度的，里面那一层content是根据内容的高度来撑起的。

html部分：

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

ng-content就是要投影进来的内容

component.ts部分

1: import引入 BScroll

2：在OnInit这个钩子里面来初始化，由于OnInit的时候，ngFor还没执行完毕，所以就加了一个定时器来延迟。

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

}

在其他组件里面使用listscroll组件

<app-listscroll [height]="height">
 <ul>
   <li class="item" *ngFor="let item of list; let num = index;">第{{num}}个</li>
 </ul>
</app-listscroll>

总结

这样better-scroll简单的使用就完成，当然better-scroll还有很多功能，可以依赖它做上拉和下拉的加载，做轮播图等等，具体可参考官方的文档。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解为Angular.js内置$http服务添加拦截器的方法
所谓拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors数组定义的一组拦截器，每个拦截器都是实现了某些特定方法的Factory。本文就介绍了为Angular.js内置$http服务添加拦截器的方法。
2016-12-12
浅析Angular 实现一个repeat指令的方法
这篇文章主要介绍了Angular 实现一个repeat指令的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
AngularJS表格详解及示例代码
本文主要讲解AngularJS表格的知识内容，这里整理了基础资料，并附代码和示例效果图，有兴趣的小伙伴可以参考下
2016-08-08
学习Angular中作用域需要注意的坑
这篇文章记录了当时刚学习angular的时候踩的关于作用域的坑，希望给以后学习Angular作用域的朋友一个提醒，有需要的可以参考学习。
2016-08-08
angularjs 的数据绑定实现原理
本篇文章主要介绍了angularjs 的数据绑定实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Angular父子组件通过服务传参的示例方法
这篇文章主要介绍了Angular父子组件通过服务传参的示例方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
AngularJS实现表单验证功能详解
这篇文章主要为大家详细介绍了AngularJS实现表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
AnglarJs中的上拉加载实现代码
上拉加载，是目前手机网站加载数据的一种常用方式，本文主要讲解AnglarJs集成，上拉加载功能。感兴趣的朋友跟随脚本之家小编一起学习吧
2018-02-02
AngularJS学习笔记（三）数据双向绑定的简单实例
这篇文章主要介绍了AngularJS学习笔记（三）数据双向绑定的简单实例，详解数据双向绑定实例的相关资料,需要的朋友可以参考下。
2016-11-11
Angular.js中下拉框实现渲染html的方法
这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来学习学习吧。
2017-06-06