better-scroll常用方法保姆级教程

基本用法都在这，用来回忆的

1.正常使用不封装

因为要等待配置的css加载完才能生效，所以不能使用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>

2.封装

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot> // 写这里
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'

export default {
   
   
  created() {
   
   
    return {
   
   
      bs: null
    }
  },
  mounted() {
   
   
    this.bs = new BetterScroll(this.$refs.wrapper, {
   
    
      movable: true,
      zoom: true,
      probeType: 3, 
      pullUpLoad: true, 
      observeDOM:true, // 封装插件记得使用这个才能正常滚动
      click:true, // 封装插件记得使用这个才能正常点击
    })
  },
}
</script>

来源：oschina

链接：https://my.oschina.net/u/4348352/blog/4924784

标签

BetterScroll