vue中使用better-scroll插件

vue中使用better-scroll插件

1、效果
在固定区域实现下拉滚动

2.安装better-scroll插件
npm install better-scroll --save
3.代码

<template>
//这里的名字可以不叫wrapper可以改成别的，但是一定要记住，这个div底下只能有一个根目录
  <div class="wrapper">
    <ul class="content">
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
       <li>1</li>
      <li>1</li>
       <li>1</li>
      <li>1</li>
       <li>1</li>
      <li>10</li>
       <li>10</li>
      <li>10</li>
      <li>10</li>
       <li>10</li>
      <li>10</li>
      <li>10</li>
       <li>10</li>
      <li>10</li>
    </ul>
  </div>
</template>

<script>
//引入插件
import BScroll from 'better-scroll'
  export default {
    name : 'Classify',
    data(){
      return{
      //定义scroll来接收BScroll实例
        scroll:null
      }
    },
    created() {
     
    },
    //要在挂载到实例后使用，不然获取不到Dom元素
    mounted(){
      console.log(document.querySelector('.wrapper'))
     // 把挂载后的实例赋值给定义在data的参数里面，防止被销毁
      this.scroll= new BScroll(document.querySelector('.wrapper'),{
      //  要不要实时监测滚动的位置   
      // 0和1都是不侦测，
      //2是侦测,在手指滚动的过程中侦测，手指离开后的惯性滚动中不侦测
      //3.只要是滚动，都侦测
       probeType:2,
       pullUpLoad:true
     })
    //  实时监听滚动的位置
      this.scroll.on('scroll',(position) => {
        // console.log(position)
      })
      // 监听下拉到底部加载下一页，等数据请求完成，并且将新的数据展示出来后,一定要执行this.scroll.finishPullUp()，如果我不执行这个语句，它只会执行一次加载更多
       this.scroll.on('pullingUp',() => {
        console.log('--加载更多')

        // 等数据请求完成，并且将新的数据展示出来后,如果我不执行这个语句，它只会执行一次加载更多
        this.scroll.finishPullUp()
      })
    }
  }
</script>

<style>
.wrapper{
  height: 150px;
  background-color: rosybrown;
  overflow: hidden;
}
</style>

注意：
1.这里的名字可以不叫wrapper可以改成别的，但是一定要记住，你挂载实例的Dom元素底下只能有一个根目录，这个根目录里面可以包含多个元素
2. //要在mounted中实例化，因为Mounted是挂载到实例上去之后调用，可以获取到Dom元素，在created中获取不到Dom元素
3. 监听下拉到底部加载下一页，等数据请求完成，并且将新的数据展示出来后,一定要执行this.scroll.finishPullUp()，如果不执行这个语句，它只会执行一次