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

2021/01/26 09:03
阅读数 38

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

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>

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部