vue中使用better-scroll插件总结

1、npm i better-scroll
2、创建一个Scroll的组件，进行封装
  <template>
     <div class=wrapper ref='myScroll'> //滚动前给特定的高度小于滚动内容的高度
       <div class=content> //滚动内容
          <slot></slot> //预留一个插槽，在需要滚动的页面引入Scroll组件并将需要滚动的内容放进插槽中 
       </div> 
     </div>	
  </template>
  <script>
     //引入better-scroll
     import BScroll from 'better-scroll'
     export default {
        name: 'Scroll',
        data() {
           return {
              scroll: null 
           }
        },
        mounted() {
           this.scroll = new BScroll(this.$refs.myScroll,{
              prototype: 3 // 实时监听滚动的位置
              click:true//可以监听点击事件
              pullLoadUp: true: //允许上拉加载 
           })
        } 
        this.scroll.on('scroll',(position) => {
           console.log(position) //监听页面滚动的位置 
        })
        this.scroll.refresh() //刷新，滚动页面中有图片等资源时获取的scrollHeight不准确
        //导致导致滚动出现bug，调用该函数更获取正确的scrollHeight
        this.scroll.on('pullingUp',() => { //监听上拉加载 只能调用一次
           this.scroll.finishPullUp() //结束此次的上拉加载，可以继续监听下一次
        })
        this.scroll.scrollTo(x,y,time) //经过time的时间滚动到（x，y）
     } 
  </script>