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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
javascript:以前写的xmlhttp池,代码
May 18 Javascript
javascript下IE与FF兼容函数收集
Sep 17 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
js浮动图片的动态效果
Jul 10 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
js继承实现方法详解
Dec 16 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
js实现适配移动端的拖动效果
Jan 13 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
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
我的论坛源代码(九)
2006/10/09 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
Python实现各种排序算法的代码示例总结
2015/12/11 Python
python与php实现分割文件代码
2017/03/06 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
实习生个人的自我评价
2013/12/08 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
计算机专业职业规划
2014/02/28 职场文书
升学宴主持词
2014/04/02 职场文书
运动会演讲稿100字
2014/08/25 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
话题作文之成长
2019/12/09 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
python实现简易自习室座位预约系统
2021/06/30 Python