Vue --- better-scroll的安装和基本使用

一、安装
1、在控制台中打开你的项目，并输入npm install better-scroll --save，回车安装，等待

二、使用

<template>
  <div>
    <h2>BScroll</h2>
    <div class="wrapper" ref="wrapper">
      <ul class="content">
      	由于数据过多，这里不做展示
        假如这里有100个li标签，并且内容为：分类列表N
      </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from "better-scroll"

  export default {
    name: "BScroll",
    data(){
      return{
        scroll:null
      }
    },
    mounted(){
      this.scroll = new BScroll(this.$refs.wrapper,{

      })
    }
  }
</script>

<style scoped>
  .wrapper{
    height:200px;
    background: #f00;
    color:#fff;
    overflow: hidden;
  }
</style>

最终效果如下

记住，根据better-scroll官方的要求，使用滚动时，必须要在外面包裹一层div，比如上面代码的class="wrapper"，然后再是需要滚动的内容，具体可以去官网查看

三、常用的几个参数

mounted(){
  this.scroll = new BScroll(this.$refs.wrapper,{
    probeType:0
  })
}

参数一：probeType，侦测滚动位置；
为0或者1时，不侦测实时的位置；
为2时，检测滚动过程中的位置，但是当手指脱离屏幕后的惯性滚动位置不再侦测；
为3时，检测滚动过程中的位置，并且侦测手指脱离屏幕后的惯性滚动位置。

侦测滚动位置的完整代码：

mounted(){
  this.scroll = new BScroll(this.$refs.wrapper,{
    probeType:3
  })

  this.scroll.on("scroll",(position) => {
    console.log(position)
  })
}

参数二：pullUpLoad，滚动触底，常用于上拉加载更多；

mounted(){
  this.scroll = new BScroll(this.$refs.wrapper,{
    pullUpLoad:true
  })

  this.scroll.on("pullingUp",() => {
    console.log("拉到底部，触发上拉加载更多")
	
	// 该方法是解决只能上拉加载一次的问题
	// 一般用于上拉加载数据完成后
    this.scroll.finishPullUp()
  })
}