BetterScroll2.0在Vue中的基本使用

BetterScroll官方文档链接

首先在你的vue项目中安装BetterScroll

代码语言：javascript复制

npm install @better-scroll/core --save

在想要使用BetterScroll的文件中引入

代码语言：javascript复制

import BScroll from '@better-scroll/core'

基本使用

代码语言：javascript复制

<div class="content" ref="scroll">
  <ul>
    <li></li>
  </ul>
</div>

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

代码语言：javascript复制

.content {
  height: 200px;
  background-color: blue;
  overflow: hidden;
}

代码语言：javascript复制

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()
    })
  }
}

容器 官方文档

0 人点赞