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 相关文章推荐
初学Javascript的一些总结
Nov 03 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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
模仿OSO的论坛(一)
2006/10/09 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
js类 from qq
2006/11/13 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
JS模板实现方法
2013/04/03 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
python3.3实现乘法表示例
2014/02/07 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
大学生创业策划书
2014/02/02 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
工作失职自我检讨书
2015/05/05 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python