Better-scroll common method tutorial

The basic usage is here, for memory

Because you have to wait for the configured css to be loaded to take effect, you cannot use created

<template>
  <!-- 只对 wrapper下对第一个元素标签内生效，其他自动忽略，当然也可以不写 content -->
  <div class="wrapper">
    <ul class="content">
      <li>1</li>
      <li>2</li>
      ......
    </ul>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll' // 引用，先 npm install better-scroll -S

export default {
    
    
  created() {
    
    
    return {
    
    
      bs: null
    }
  },
  mounted() {
    
    
    this.bs = new BetterScroll('.wrapper', {
    
     // 如果使用默认（前两条属性），可以不用赋值，直接 new
      movable: true,
      zoom: true,
      probeType: 3, // 2移动距离（手指离开滑动不算） 3移动加滑动距离
      pullUpLoad: true, // 上拉加载更多
    })

    this.direction()

    console.log(this.bs) // 打印一下就知道里面的全部属性
  },
  methods: {
    
    
    direction() {
    
    
      // 监听移动距离
      this.bs.on('scroll', (position) => {
    
    
        console.log(position.y) // 实际调用的是 directionY，可用有XY，不写默认全部
      })

      // 监听上拉加载更多
      this.bs.on('pullingUp', () => {
    
    
        console.log('上拉加载更多') 
        // 第一步：调用接口并展示数据
        // 第二步：执行以下函数，告诉插件已完成事件，才可以进行下一次下拉事件
        this.bs.finishPullUp()
      })
    }
  }
}
</script>

<style lang="less" scope>
.wrapper {
    
    
  height: 200px;
  background-color: pink;

  overflow: auto;
}
</style>