better-scroll是一个页面滚动插件,用它可以很方便的实现下拉刷新,锚点滚动等功能。

实现原理:父容器固定高度,并设置overflow:hidden,子元素超出父元素高度后将被隐藏,超出部分可滚动且没有滚动条。

立即使用:

<body>
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
<script type="text/javascript" src="better-scroll.js"></script>
<script type="text/javascript">
new BScroll(document.getElementById('wrapper'));
</script>
</body>

结合vue使用:

通过npm引入

1. 安装better-scroll

npm install better-scroll

2. 页面中引入better-scroll

import BScroll from 'better-scroll'

3. 如果不支持import,可使用

var BScroll = require('better-scroll')

页面结构:

<div id="wrapper" ref="wrapper">
<ul class="container">
<li>...</li>
<li>...</li>
...
</ul>
</div>

在methods中写一个方法:

 _initScroll() {
this.boxScroll= new BScroll(this.$refs.wrapper, {
click: true
})
},

注意:

  better-scroll会将点击事件去掉,如果滚动部分需要有点击事件,需要在参数里加上click:true。

  同时,在PC上或某些手机端,由于未成功将touchend事件move掉,点击事件会执行两次。

  better-scroll派发的event事件和原生js的event有属性上的区别,其中有一个属性为event._constructed。better-scroll派发的事件中event._constructed为true,原生点击事件中没有这个属性。

selectList(index,event){
if(!event._constructed){//如果不存在这个属性,则为原生点击事件,不执行下面的函数
return
}
}

由于vue中数据更新是异步的,在dom解构没有加载完成,BScroll无法获取目标容器的高度,会出现无法滚动的现象。

vue中有一个方法可以解决这个问题:$nextTick()

根据官方API的解释可知,一些需要在页面数据变化完成后才执行的函数需要写在$nextTick中 。

this.$nextTick(() => {
this._initScroll()
})

附better-scroll参数:

  • startX: 0 开始的X轴位置
  • startY: 0 开始的Y轴位置
  • scrollX: true 滚动方向为X轴
  • scrollY: true 滚动方向为Y轴
  • click: true 是否启用click事件
  • directionLockThreshold: 5
  • momentum: true 是否开启动量动画,关闭可以提升效率
  • bounce: true 是否启用弹力动画效果,关掉可以加速
  • selectedIndex: 0
  • rotate: 25
  • wheel: false 是否监听鼠标滚轮事件
  • snap: false 自动分割容器,用于制作走马灯效果等
  • snapLoop: false
  • snapThreshold: 0.1
  • swipeTime: 2500
  • bounceTime: 700 弹力动画持续的毫秒数
  • adjustTime: 400
  • swipeBounceTime: 1200
  • deceleration: 0.001 滚动动量减速越大越快,建议不大于0.01
  • momentumLimitTime: 300
  • momentumLimitDistance: 15
  • resizePolling: 60 重新调整窗口大小时,重新计算better-scroll的时间间隔
  • preventDefault: true 是否阻止默认事件
  • preventDefaultException: { tagName: - /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
  • HWCompositing: true 是否启用硬件加速
  • useTransition: true 是否使用CSS3的Transition属性,否则使用requestAnimationFram代替
  • useTransform: true 是否使用CSS3的Transform属性
  • probeType: 1. 滚动的时候会派发scroll事件,会截流。2. 滚动的时候实时派发 - scroll事件,不会截流。 3. 除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件

参考网站:

https://www.npmjs.com/package/better-scroll     better-scroll文档

https://github.com/ustbhuangyi/better-scroll     github

better-scroll的用法,及其中的一个属性event._constructed详解的更多相关文章

  1. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  2. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  3. IOS中Key-Value Coding (KVC)的使用详解

    kvc,键值编码,是一个非正式的协议,它提供一种机制来间接访问对象的属性.直接访问对象是通过调用访问器的方法实现,而kvc不需要调用访问器的设置和获取方法,可以直接访问对象的属性. 下面介绍一下kvc ...

  4. java中List的用法和实例详解

    java中List的用法和实例详解 List的用法List包括List接口以及List接口的所有实现类.因为List接口实现了Collection接口,所以List接口拥有Collection接口提供 ...

  5. Python中的__name__和__main__含义详解

    1背景 在写Python代码和看Python代码时,我们常常可以看到这样的代码: ? 1 2 3 4 5 def main():     ......   if __name == "__m ...

  6. Java中堆内存和栈内存详解2

    Java中堆内存和栈内存详解   Java把内存分成两种,一种叫做栈内存,一种叫做堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,ja ...

  7. Python中操作mysql的pymysql模块详解

    Python中操作mysql的pymysql模块详解 前言 pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而后者不支持 ...

  8. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  9. Scala 深入浅出实战经典 第62讲:Scala中上下文界定内幕中的隐式参数实战详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...

随机推荐

  1. nginx配置文件的性能优化

    1.nginx进程数,建议按照cpu数目来指定,一般跟cpu核数相同或为它的倍数.worker_processes 8; 2.为每个进程分配cpu,上例中将8个进程分配到8个cpu,当然可以写多个,或 ...

  2. NTP时间服务器的配置

      1.NTP简介NTP(Network Time Protocol,网络时间协议)是用来使网络中的计算机,时间同步的一种协议.NTP服务器利用NTP协议来提供时间同步服务. 2 .环境准备主机名   ...

  3. const_cast

    函数原型: const_cast < type-id > ( expression ) 去掉const属性:const_cast<int*> (&num),常用,因为不 ...

  4. posix对线程的调整

    fork 当多线程进程调用fork创建子进程时,从fork返回时,只有调用fork的线程在进程内存在(其他线程在子进程中不存在,好比调用pthread_exit退出,不再拥有私有数据destructo ...

  5. debian下为apache启用rewrite模块

    如果我们是自己编译的apache,那么启用或禁用某个模块应该说是比较容易的事,只要修改apache的配置文件就可以了.但是我们没有理由不用已经做好的二进制文件进行安装,使用apt-get要方便多了. ...

  6. IE8 focus 失效解决方案

    这几天遇到两个在IE8下focus失效的非常奇怪的问题,当然这个是指JS函数: document.getElementById("id").focus(); 或者 $(" ...

  7. "废物利用"也抄袭——“完全”DIY"绘图仪"<三、上位机程序设计>

    上位机的程序主要是解析图片和生成较好的代码,现在实现的功能有灰度打印,二值打印,轮廓打印,骨骼打印.当然,必不可少的是打印大小的控制.测试了一些图片,总体来说,打印速度依次加快,因为打印的内容依次减少 ...

  8. 黄聪:定制化WordPress后台自定义仪表盘

    WordPress作为一博客管理系统,相对来说已经相当简洁了,对用户也十分友好,新手也极易上手. 仪表盘是我们登陆WordPress后看到的后台界面,映入眼帘的是各种各样的信息,如WordPress ...

  9. 修改Gradle 和Maven本地仓库的位置方法

    本文转载自:https://www.cnblogs.com/dwb91/p/6523541.html 关于Maven的配置: 用过Maven的开发人员应该知道Maven可以通过配置 conf文件夹下面 ...

  10. 微软开源rDSN分布式系统开发框架

    摘要:微软亚洲研究院系统组开发的分布式系统开发框架——Robust Distributed System Nucleus(rDSN)正式在GitHub平台开源.据悉,rDSN是一个旨在为广大分布式系统 ...