zl程序教程

您现在的位置是:首页 >  Java

当前栏目

BetterScroll2.0在Vue中的基本使用

2023-02-18 16:30:15 时间

BetterScroll官方文档链接

首先在你的vue项目中安装BetterScroll
npm install @better-scroll/core --save
在想要使用BetterScroll的文件中引入
import BScroll from '@better-scroll/core'
基本使用
<div class="content" ref="scroll">
  <ul>
    <li></li>
  </ul>
</div>

需要给父容器设置固定高度

.content {
  height: 200px;
  background-color: blue;
  overflow: hidden;
}
export default {
  data() {
    return() {
      scroll: null
    }
  },
  mounted() {
    this.scroll = new BScroll('this.$refs.scroll', {
      probeType: 3,
      pullUpLoad: true  
    })

    /*
    * 监听滚动位置 需要配置probeType
    * 默认值为0 不派发scroll事件
    * 可选值 1|2|3
    */
    this.scroll.on('scroll', (positon) => {
      console.log(position);
    })

    /*
    * 上拉加载刷新事件 配置项pullUpLoad
    * 需要调用finishPullUp()方法结束上拉加载 才可以进行下一次上拉加载
    */
    this.scroll.on('pullingUp', () => {
      console.log('上拉加载刷新')
      //手动结束上拉加载
      this.scroll.finishPullUp()
    })
  }
}