better-scroll使用总结

参考：https://zhuanlan.zhihu.com/p/27407024

better-scroll使用小结

核心就是这4个

 <script>
 import BScroll from 'better-scroll'
 const ERR_OK=0;
 export default{
     props:['seller'],
     data(){
         return{
             goods:[],
             listHeight:[],
             scrollY: 0
         }
     },
     created(){
         this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
         var _this=this;
         this.$axios.get('/apis/goods').then(function(res){
             var res=res.data;
             if(res.errno===ERR_OK){
                 _this.goods=res.data;
                 console.log(_this.goods);
                 /*Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新*/
                 /*$nextTick是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM*/
                 _this.$nextTick(() => {
           _this._initScroll();
           _this._calculateHeight();
         });
             }
         })
     },
     computed:{
         currentIndex(){
             for(let i=0;i<this.listHeight.length;i++){
                 let height1=this.listHeight[i];
                 let height2=this.listHeight[i+1];
                 if(!height2 || (this.scrollY>=height1 && this.scrollY<height2)){
                     //
                     this._followScroll(i);
                     return i;
                 }
             }
             return 0;
         }
     },
     methods:{
         selectMenu(index,event){
             /*为了兼容PC*/
             if (!event._constructed) {
         return;
       }
       /**/
             let foodList=this.$refs.foodList;
             let el=foodList[index];
             this.foodsScroll.scrollToElement(el,300);
         },
         _initScroll(){
             this.menuScroll = new BScroll(this.$refs.menuWrapper,{
                 click:true
             })

             this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
                 click:true,
                 probeType:3
             });
             /*是否派发滚动事件*/
             this.foodsScroll.on('scroll',(pos)=>{
                 //Math.abs//取正数
                 this.scrollY=Math.abs(Math.round(pos.y));
             })
             /*probeType类型：Number
         默认值：0
         可选值：1、2、3
         作用：有时候我们需要知道滚动的位置。当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，
　　　　　　会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，
　　　　　　而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件。*/
         },
         _calculateHeight(){
             let foodList=this.$refs.foodList;
             let height=0;
             this.listHeight.push(height);
             for(let i=0;i<foodList.length;i++){
                 let item = foodList[i];
           height += item.clientHeight;
           this.listHeight.push(height);
             }

         },
         _followScroll(index){
             let menuList=this.$refs.menuList;
             let el=menuList[index];
             this.menuScroll.scrollToElement(el,300);
         }
     }
 }
 </script>