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


Posted in Javascript onMarch 27, 2018

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还有很多功能,可以依赖它做上拉和下拉的加载,做轮播图等等,具体可参考官方的文档。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 #Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 #Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 #Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 #Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 #Javascript
JS从非数组对象转数组的方法小结
Mar 26 #Javascript
深入理解Node module模块
Mar 26 #Javascript
You might like
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php格式化电话号码的方法
2015/04/24 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
python3.7.0的安装步骤
2018/08/27 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
python打造爬虫代理池过程解析
2019/08/15 Python
python中bytes和str类型的区别
2019/10/21 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
施工安全承诺书
2014/05/22 职场文书
研究生求职自荐书
2014/06/23 职场文书
行政复议答复书
2015/07/01 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
python flappy bird小游戏分步实现流程
2022/02/15 Python
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL