1.安装

官网

  1. npm install better-scroll --save

2.具体使用

1.首先在最外层需要套一个


在wrapper里面只能有一个标签元素，这里得类名可以随意定义

  1. <div class="wrapper" >
  2.  <ul class="content">
  3.      <li>分leu</li>
  4.      <li>分leu</li>
  5.      <li>分leu</li>
  6.      <li>分leu</li>
  7.      <li>分leu</li>
  8.      <li>分leu</li>
  9.      <li>分leu</li>
  10.      <li>分leu</li>
  11.      <li>分leu</li>
  12.      <li>分leu</li>
  13.      <li>分leu</li>
  14.      <li>分leu</li>
  15.      <li>分leu</li>
  16.      <li>分leu</li>
  17.      <li>分leu</li>
  18.      <li>分leu</li>
  19.      <li>分leu</li>
  20.      <li>分leu</li>
  21.      <li>分leu</li>
  22.      <li>分leu</li>
  23.      <li>分leu</li>
  24.      <li>分leu</li>
  25.      <li>分leu</li>
  26.      <li>分leu</li>
  27.      <li>分leu</li>
  28.      <li>分leu</li>
  29.      <li>分leu</li>
  30.      <li>分leu</li>
  31.      <li>分leu</li>
  32.      <li>分leu</li>
  33.      <li>分leu</li>
  34.      <li>分leu</li>
  35.      <li>分leu</li>
  36.      <li>分leu</li>
  37.      <li>分leu</li>
  38.      <li>分leu</li>
  39.      <li>分leu</li>
  40.      <li>分leu</li>
  41.      <li>分leu</li>
  42.      <li>分leu</li>
  43.      <li>分leu</li>
  44.      <li>分leu</li>
  45.      <li>分leu</li>
  46.      <li>分leu</li>
  47.      <li>分leu</li>
  48.      <li>分leu</li>
  49.      <li>分leu</li>
  50.      <li>分leu</li>
  51.      <li>分leu</li>
  52.      <li>分leu</li>
  53.      <li>分leu</li>
  54.      <li>分leu</li>
  55.      <li>分leu</li>
  56.      <li>分leu</li>
  57.      <li>分leu</li>
  58.      <li>分leu</li>
  59.      <li>分leu</li>
  60.      <li>分leu</li>
  61.      <li>分leu</li>
  62.      <li>分leu</li>
  63.  </ul>
  64.  </div>

2.需要设置wrapper的高度

  1. .wrapper{
  2.     height: 100px;
  3.     width: 100%;
  4.     background-color: aqua;
  5.     overflow: hidden;
  6. }

3.导入

  1. import Bscroll from "better-scroll"

4..在mounted生命周期函数中使用

  1. mport Bscroll from "better-scroll"
  2.  export default {
  3.  name:'',
  4.  data () {
  5.  return {
  6.     bs:null
  7.  }
  8.  },
  9. mounted(){
  10.      this.bs=new Bscroll(document.querySelector(".wrapper"),{
  12.      })
  13.  },

这里一定得在mounted生命周期函数中使用

3.监听用户滚动的位置

默认情况下BScroll是不可以实时的监听滚动位置的，需要使用一个probetype
probetype属性值：0，1都是不侦测。2是手指滚动的过程中侦测，手指离开后的惯性不侦测。3.只要是滚动就侦测

  1. mounted(){
  2.      this.bs=new Bscroll(document.querySelector(".wrapper"),{
  3.         probeType:3
  4.      })
  5.      this.bs.on("scroll",(position)=>{
  6.          console.log(position)
  7.      })
  8.  },

在**Bscroll的实例后需要加上probetype属性，使用on监听，监听的结果在它的回调函数的position中。**

4.上拉加载

首先在Bscroll的实例后面加上一 个pullUpLoad:true，在使用pullingUp事件

  1. mounted(){
  2.      this.bs=new Bscroll(document.querySelector(".wrapper"),{
  3.         probeType:3,
  4.         pullUpLoad:true
  5.      })
  7.      this.bs.on("pullingUp",()=>{
  8.        //发送网络请求，请求更多页数据
  9.          console.log("下拉加载更多")
  10.        //等数据请求完成，并且将新的数据展示出来后
  11.          this.bs.finishPullUp()
  12.      })
  13.  },

5.封装

image.png
这里scope是作用域的意思，只在当前作用域中起作用，也就是在当前作用域中起作用。