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)