better-scroll滚定插件

滚动原理：
浏览器的滚动条：
当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也 就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
注意：
我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。
如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。

在vue中的用法：

1.在github中找到并安装第三方插件
npm install better-scroll --save
2.在vue中模块中引入

<template> 
    <div class="wrapper" ref="wrapper">
        <ul class="content"> 
            <li>...</li> 
            ... 
        </ul>
     </div> 
</template> 
<script>
import BScroll from 'better-scroll'; 
export default {
    data(){
        return {
           scroll:null
        }
    },
    mounted(){
       this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.ratingsWrapper, {
        probeType:3,
        pullUpLoad:true
   });
       this.scroll.on("scroll",(position)=>{console.log(position);  })
         //时时监控位置
        this.scroll.on("pullingUp",()=>{console.log("上拉加载更多");  })
        //下拉加载更多
       })
    }
}
</script>

参数解析
1.当 probeType 为 1 的时，会非实时（屏幕滑动超过一定时间后）派发scroll 事件,不会时时的测监测位置。
当 probeType 为 2 的时候，在手指的滚动过程中检测，当手指离开后的惯性滚动不会被监测。
当 probeType 为 3 的时，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
2.click为false 在ul内如果有按钮的点击事件时，不会被监听。
3.pullUpLoad:true 上拉加载更多。