关于 Vue 混入 (Mixin)

Vue Mixinis

Vue中可以可以实现 组件混入的写法, 类似Python 的多继承关系

1. 在 scroll.js中对 better-scroll 进行二次封装

   import BScroll from 'better-scroll'
   export default {
    data(){
        return{
            down:false,//下拉时顶部是否显示加载中
            up:false,//上拉时底部是否显示加载中
            upend:false,//数据加载完成底部提示
            bol:false,//最后一次加载
            scrollStyle :'',
            sateY:0,
            lastList:0,//最后一页是几条
            totalBalance:0,//合计，后端只返回每页的合计，需累加
        }
    },
    created(){
        setTimeout(()=>{
               //提前加载滚动插件
            this._initSlider()
        },20)
    },
    watch:{
           // 监听渲染的数据列表发生变化之时
        dataList(){//监听数据变化，重新初始化滚动函数
            seTimeout(()=>{//提前加载滚动插件
                this.refresh();  
                   // this.scroll.refresh(); BS内置重置 滚动方法, 防止滚动高度发生偏差
                if(scrollStyle === 'up'){
                       //如果是上拉，滚动条直接滚动到
                    this.scroll.scrollTo(0,this.satrY(115*this.lastList))
                }
            },20)
        }
    },
    methods:{
        _initSlider(){
               //下拉刷新，上拉加载
            if(!this.$refs.wrapper){
                return
            }
            //better-scroll初始化
            this.scrool = new BScroll(this.$refs.wrapper,{
                probeType:3,
                click:true,
                scrollx:true
            });
               // 监听scroll的滚动事件, 回调函数会传入 位置信息
            this.scool.on('scroll',pos=>{
                this.satry = pos.y;
                //如果下拉超过50px 就显示下拉刷新的文字
                this.down = true;
                // pos.y > 50 ?(this.down = true):(this.down = false)
                this.down = pos.y > 50
               });
               //touchEnd 通过这个方法来监听下拉刷新 (即 监听手指抬起这个动作)
               this.scroll.on('touchEnd ',pos=>{
                   //下拉动作
                   if(pos.y > 10){
                       this.scrollStyle = 'down';
                       this.down = true;
                       console.log('下拉刷新');
                       this.pagNo = 1; //请求第一页
                       this.upend = false;
                       this.totalBalance = 0;//下拉刷新合计清0
                       this.upend = false;
                       this.getData().then(res=>{
                           //刷新数据
                           this.down = false;
                           //去除旧数据，防止数组一直累加
                           this.dataList.length = 0;
                           this.dataList = res;
                           return
                       })
                   }
                if(this.scroll.maxScrollY > pos.y +10){
                       //这里的10是距离底部多少像素的时候触发
                       if(!this.bol){//如果是最后一次请求
                           this.up = false;
                           this.upend = true;
                           return
                       }
                       this.satry = pos.y;
                       this.scrollStyle = 'up';
                       console.log('上拉刷新');
                       this.up = true;
                       this.pageNo = this.pageNoNew;//赋值之前存储的当前页数
                       if(this.up){
                           this.getData().then(res=>{
                               this.dataList = res;
                           })
                       }
                   }
               })       
           }
    },
    refresh(){
        this.scroll && this.scroll.refresh();
    }
   }
   

2. 在Vue组件中 混入封装 scroll.js插件

   
    
    
   
           
   
               
               
                   
   
                       
   
                           下拉刷新
                       
                   
               
               
   
                   
   
                       
    {{item.totalRealPrice}}元
                       
    {{item.title}}
                       
    {{item.totalRealPrice}}元
                   
              
               
               
                   
   
                       
   
                              
                           加载中...
                       
                       
   
                           已经没有更多了~~~