better-scroll.js⽂档
⽂章⽬录
better-scroll
介绍
better-scroll 是什么
better-scroll 是⼀款重点解决移动端（已⽀持 PC）各种滚动场景需求的插件。它的核⼼是借鉴的 的实现，它的 API 设计基本兼容iscroll，在 iscroll 的基础上⼜扩展了⼀些 feature 以及做了⼀些性能优化。
better-scroll 是基于原⽣ JS 实现的，不依赖任何框架。它编译后的代码⼤⼩是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是⼀款⾮常轻量的 JS lib。
起步
学习使⽤ better-scroll 最好的⽅式是看它的 demo 代码，我们把代码都放在了 ⽬录。由于⽬前最适合移动端开发的前端 mvvm 框架是 ，并且 better-scroll 可以很好的和 Vue 配合使⽤的，所以 demo 我都⽤ Vue 进⾏了重写。
better-scroll 最常见的应⽤场景是列表滚动，我们来看⼀下它的 html 结构
<div class="wrapper">
js控制css3动画触发
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
<!-- 这⾥可以放⼀些其它的 DOM，但不会影响滚动 -->
</div>
上⾯的代码中 better-scroll 是作⽤在外层 wrapper 容器上的，滚动的部分是 content 元素。这⾥要注意的是，better-scroll 只处理容器（wrapper）的第⼀个⼦元素（content）的滚动，其它的元素都会被忽略。
最简单的初始化代码如下：
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
better-scroll 提供了⼀个类，实例化的第⼀个参数是⼀个原⽣的 DOM 对象。当然，如果传递的是⼀个字符串，better-scroll 内部会尝试调⽤ querySelector 去获取这个 DOM 对象，所以初始化代码也可以是这样：
import BScroll from 'better-scroll'
let scroll = new BScroll('.wrapper')
滚动原理
很多⼈已经⽤过 better-scroll，我收到反馈最多的问题是：
better-scroll 初始化了， 但是没法滚动。
不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看⼀下浏览器的滚动原理： 浏览器的滚动条⼤家都会遇到，当页⾯内容的⾼度超过视⼝⾼度的时候，会出现纵向滚动条；当页⾯内容的宽度超过视⼝宽度的时候，会出现横向滚动条。也就是当我们的视⼝展⽰不下内容的时候，会通过滚动条的⽅式让⽤户滚动屏幕看到剩余的内容。
better-scroll 也是⼀样的原理，我们可以⽤⼀张图更直观的感受⼀下：
绿⾊部分为 wrapper，也就是⽗容器，它会有固定的⾼度。黄⾊部分为 content，它是⽗容器的第⼀个⼦元素，它的⾼度会随着内容的⼤⼩⽽撑⾼。那么，当 content 的⾼度不超过⽗容器的⾼度，是不能滚动的，⽽它⼀旦超过了⽗容器的⾼度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。
better-scroll 在 MVVM 框架的应⽤
我之前写过⼀篇，也希望⼤家投稿，分享⼀下 better-scroll 在其它框架下的使⽤⼼得。
⼀款超赞的基于 Vue 实现的组件库 。
安装
NPM
better-scroll 托管在 Npm 上，执⾏如下命令安装：
npm install better-scroll --save
接下来就可以在代码中引⼊了， 等构建⼯具都⽀持从 node_modules ⾥引⼊代码：
import BScroll from 'better-scroll'
如果是 ES5 的语法，如下：
var BScroll = require('better-scroll')
script 加载
选项 / 基础
better-scroll ⽀持很多参数配置，可以在初始化的时候传⼊第⼆个参数，⽐如：
let scroll = new BScroll('.wrapper',{
scrollY: true,
click: true
})
这样就实现了⼀个纵向可点击的滚动效果。better-scroll ⽀持的参数⾮常多，可以修改它们去实现更多的 feature。通常你可以不改这些参数（列出不建议修改的参数），better-scroll 已经为你实现了最佳效果，接下来我们来列举 better-scroll ⽀持的参数。
startX
类型：Number,
默认值：0
作⽤：横轴⽅向初始化位置。
startY
类型：Number,
默认值：0
作⽤：纵轴⽅向初始化位置，见 。
scrollX
类型：Boolean
默认值: false
作⽤：当设置为 true 的时候，可以开启横向滚动。
备注：当设置 为 ‘horizontal’ 的时候，该配置⽆效。
scrollY
类型：Boolean
默认值：true
作⽤：当设置为 true 的时候，可以开启纵向滚动。
备注：当设置 为 ‘vertical’ 的时候，该配置⽆效。
freeScroll
类型：Boolean
默认值：false
作⽤：有些场景我们需要⽀持横向和纵向同时滚动，⽽不仅限制在某个⽅向，这个时候我们只要设置 freeScroll 为 true 即可。
备注：当设置 不为空的时候，该配置⽆效。
directionLockThreshold
类型：Number
默认值：5（不建议修改）
作⽤：当我们需要锁定只滚动⼀个⽅向的时候，我们在初始滚动的时候根据横轴和纵轴滚动的绝对值做差，当差值⼤于
directionLockThreshold 的时候来决定滚动锁定的⽅向。
备注：当设置 的时候，directionLockThreshold 设置⽆效，始终为 0。
eventPassthrough
类型： String
默认值：’’
可选值：‘vertical’、‘horizontal’
作⽤：有时候我们使⽤ better-scroll 在某个⽅向模拟滚动的时候，希望在另⼀个⽅向保留原⽣的滚动（⽐如轮播图，我们希望横向模拟横向滚动，⽽纵向的滚动还是保留原⽣滚动，我们可以设置 eventPassthrough 为 vertical；相应的，如果我们希望保留横向的原⽣滚动，可以设置eventPassthrough为 horizontal）。
备注：eventPassthrough 的设置会导致其它⼀些选项配置⽆效，需要⼩⼼使⽤它。
click
类型：Boolean
默认值：false
作⽤：better-scroll 默认会阻⽌浏览器的原⽣ click 事件。当设置为 true，better-scroll 会派发⼀个 click 事件，我们会给派发的event 参数加⼀个私有属性 _constructed，值为 true。
dblclick(v1.12.0+)
类型：Boolean | Object
默认值：false
作⽤：派发双击点击事件。当配置成 true 的时候，默认 2 次点击的延时为 300 ms，如果配置成对象可以修改 delay。
dblclick: {
delay: 300
}
tap
类型：Boolean | String
默认值：false
作⽤：因为 better-scroll 会阻⽌原⽣的 click 事件，我们可以设置 tap 为 true，它会在区域被点击的时候派发⼀个 tap 事件，你可以像监听原⽣事件那样去监听它，如 element.addEventListener('tap', doSomething, false);。如果 tap 设置为字符串, 那么这个字符串就作为⾃定义事件名称。如 tap: 'myCustomTapEvent'。
bounce
类型：Boolean | Object
默认值：true
作⽤：当滚动超过边缘的时候会有⼀⼩段回弹动画。设置为 true 则开启动画。
bounce: {
top: true,
bottom: true,
left: true,
right: true
}
⾃ 1.10.0 版本以后，bounce 可以⽀持关闭某些边的回弹效果，可以设置对应边的 key 为 false 即可。
bounceTime
类型：Number
默认值：800（单位ms，不建议修改）
作⽤：设置回弹动画的动画时长。
momentum
类型：Boolean
默认值：true
作⽤：当快速在屏幕上滑动⼀段距离的时候，会根据滑动的距离和时间计算出动量，并⽣成滚动动画。设置为 true 则开启动画。
momentumLimitTime
类型：Number
默认值：300（单位ms，不建议修改）
作⽤：只有在屏幕上快速滑动的时间⼩于 momentumLimitTime，才能开启 momentum 动画。
momentumLimitDistance
类型：Number
默认值：15（单位px，不建议修改）
作⽤：只有在屏幕上快速滑动的距离⼤于 momentumLimitDistance，才能开启 momentum 动画。
swipeTime
类型：Number
默认值：2500（单位ms，不建议修改）
作⽤：设置 momentum 动画的动画时长。
swipeBounceTime
类型：Number
默认值：500（单位ms，不建议修改）
作⽤：设置当运⾏ momentum 动画时，超过边缘后的回弹整个动画时间。
deceleration
类型：Number
默认值：0.0015（不建议修改）
作⽤：表⽰ momentum 动画的减速度。
flickLimitTime
类型：Number
默认值：200（单位ms，不建议修改）
作⽤：有的时候我们要捕获⽤户的轻拂动作（短时间滑动⼀个较短的距离）。只有⽤户在屏幕上滑动的时间⼩于 flickLimitTime ，才算⼀次轻拂。
flickLimitDistance
类型：Number
默认值：100（单位px，不建议修改）
作⽤：只有⽤户在屏幕上滑动的距离⼩于 flickLimitDistance ，才算⼀次轻拂。
resizePolling
类型：Number
默认值：60（单位ms，不建议修改)
作⽤：当窗⼝的尺⼨改变的时候，需要对 better-scroll 做重新计算，为了优化性能，我们对重新计算做了延时。60ms 是⼀个⽐较合理的值。
probeType

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。