Vue项目中BetterScroll的使用

1 安装

---

详情点击

npm install @better-scroll/core@next --save

在需要使用的组件里引入

import BScroll from '@better-scroll/core'

2 使用

---

• 最好的时机就是在界面更新后，出初始化构造函数，特别是对于异步加载的数据，我们一般写如下代码

    watch: {
          data(value) { 
        	this.$nextTick(() => {
          		new BScroll('.wrapper', {
            	click: true
          })
        })
    },

• data使我们监视的异步数据
• 对于wrapper的要求是固定的高度，且其子元素的高度超过父元素
• 对于一些配置项，请点击

在想要滚动的区域包裹

• 一定要注意其高度和宽度
• 他的子元素必须只能有一个，多个无效

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

.wrapper {
    position: fixed;
    width: 100%;
    top: 45px;
    bottom: 46px;
    overflow: hidden;
}

3 其他

---

收集实时位置

当我们想要知道滚动的位置是，必须配置一个属性probeType,详情点击，之后我们就可以监听scroll事件获取位置

new BScroll('.wrapper', {
    probeType: 2,  
    click: true
})

• 1表示非实时
• 2表示实时，但是惯性滑动不会触发
• 3表示实时

绑定监听

• 我们要在new BScroll()上面进行绑定监听，官方的绑定方法如下，详情点击

import BScroll from '@better-scroll/core'
let scroll = new BScroll('.wrapper', {
  probeType: 3
})
function onScroll(pos) {
    console.log(`Now position is x: ${pos.x}, y: ${pos.y}`)
}
scroll.on('scroll', onScroll)

• 这个例子中也为我们获取了滚动的距离

滚动到固定的位置

• 我们需要使用到scrollTo方法，详情点击

const scroll = new BScroll()
scroll.scrollTo(x,y,time)