Vue项目中BetterScroll的使用

柯清野
2023-12-01

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)
  • 这个例子中也为我们获取了滚动的距离

滚动到固定的位置

const scroll = new BScroll()
scroll.scrollTo(x,y,time)
 类似资料: