vue插件-BetterScroll使用

BetterScroll 是一款重点解决移动端（已支持PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
BetterScroll 提供了很多灵活的 API，当我们基于 better-scroll 去实现一些 feature 的时候，会用到这些 API，了解他们会有助于开发更加复杂的需求。

使用
参数
方法

使用

插件的安装请看BetterScroll

html

1
2
3

<div class="wrapper" ref="wrapper">
    <div class="container"></div>
</div>

1
2
3

this.wrapperScroll = new BScroll(this.$refs.wrapper, {
click: true //还可以添加其他参数(具体看下方)
})

参数

startX: 0 开始的X轴位置
startY: 0 开始的Y轴位置
scrollY: true 滚动方向为 Y 轴
scrollX: true 滚动方向为 X 轴
click: true 是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click
momentum: true 当快速滑动时是否开启滑动惯性
bounce: true 是否启用回弹动画效果
selectedIndex: 0 wheel 为 true 时有效，表示被选中的 wheel 索引
rotate: 25 wheel 为 true 时有效，表示被选中的 wheel 每一层的旋转角度
wheel: false 该属性是给 picker 组件使用的，普通的列表滚动不需要配置
snap: false 该属性是给 slider 组件使用的，普通的列表滚动不需要配置
snapLoop: false 是否可以无缝循环轮播
snapThreshold: 0.1 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
snapSpeed: 400, 轮播图切换的动画时间
swipeTime: 2500 swipe 持续时间
bounceTime: 700 弹力动画持续的毫秒数
adjustTime: 400 wheel 为 true 有用，调整停留位置的时间
swipeBounceTime: 1200 swipe 回弹时间
deceleration: 0.001 滚动动量减速越大越快，建议不大于0.01
momentumLimitTime: 300 符合惯性拖动的最大时间
momentumLimitDistance: 15 符合惯性拖动的最小拖动距离
resizePolling: 60 重新调整窗口大小时，重新计算better-scroll的时间间隔
preventDefault: true 是否阻止默认事件
useTransition: true 是否使用CSS3的Transition属性
useTransform: true 是否使用CSS3的Transform属性
probeType: 1 滚动的时候会派发scroll事件，会截流。2 滚动的时候实时派发scroll事件，不会截流。 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件

方法

refresh()

参数：无
返回值：无
作用：重新计算 better-scroll，当 DOM结构发生变化的时候务必要调用确保滚动的效果正常。

scrollTo(x, y, time, easing)

参数：
{Number} x 横轴坐标（单位 px）
{Number} y 纵轴坐标（单位 px）
{Number} time 滚动动画执行的时长（单位 ms）
{Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法
返回值：无
作用：滚动到指定的位置，见 Demo 。

scrollBy(x, y, time, easing)

参数：
{Number} x 横轴距离（单位 px）
{Number} y 纵轴距离（单位 px）
{Number} time 滚动动画执行的时长（单位 ms）
{Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法
返回值：无
作用：相对于当前位置偏移滚动 x,y 的距离。

scrollToElement(el, time, offsetX, offsetY, easing)

参数：
{DOM | String} el 滚动到的目标元素, 如果是字符串，则内部会尝试调用 querySelector 转换成 DOM 对象。
{Number} time 滚动动画执行的时长（单位 ms）
{Number | Boolean} offsetX 相对于目标元素的横轴偏移量，如果设置为 true，则滚到目标元素的中心位置
{Number | Boolean} offsetY 相对于目标元素的纵轴偏移量，如果设置为 true，则滚到目标元素的中心位置
{Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法
返回值：无
作用：滚动到指定的目标元素。