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>