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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
JS数组的常用方法整理
Mar 31 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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 数组基础知识小结
2010/08/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
python随机生成指定长度密码的方法
2015/04/04 Python
用Python实现协同过滤的教程
2015/04/08 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
自荐信需注意事项
2014/01/25 职场文书
党支部承诺书范文
2014/03/28 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
工作求职信
2014/07/04 职场文书
计划生育工作汇报
2014/10/28 职场文书
工作失误检讨书
2015/01/26 职场文书