关于 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插件

   <!--注意，这里必须用v-show，以便预加载滚动插件-->
   <div v-show='dataList.length > 0'> 
    <div class='wrapper' ref='wrapper'>
           <ul class='content'>
               <!-- transition是Vue内置的动画插件 name是指动画效果 -->
               <transition name='fade'>
                   <div class='newxin' v-show='down'>
                       <p>
                           <loading-tip size='24px'>下拉刷新</loading-tip>
                       </p>
                   </div>
               </transition>
               <li class='myorderList' 
                   v-for='(item,index) in dataList' 
                   :key="index" 
                   :id="`scroll-item-${index}`"
                   >
                   <div @click='myOrderFind(index)'>
                       <p> {{item.totalRealPrice}}元</p>
                       <p> {{item.title}}</p>
                       <p> {{item.totalRealPrice}}元</p>
                   </div>           
               </li>
               <transition name='fade'>
                   <div class='newxin'>
                       <p  v-show='up'>
                           <!-- 随便做一个 加载提示的组件, 实在不行就写个 p 标签 -->   
                           <loading-tip size='24px'>加载中...</loading-tip>
                       </p>
                       <p  v-show='upend'>
                           <loading-tip size='24px'>已经没有更多了~~~</v-loading>
                       </p>
                   </div>
               </transition>
           </ul>
    </div>
   </div>
   
   <div v-else>
       <nodata-tip txt='暂无数据'></nodata-tip>
   </div>
   <script>
   
   import { scrollMixin} from '/mixin/scoll';
   import LoadingTip from "@/components/common/loading_tip"
   import NodataTip from "@/components/common/nodata_tip"
   export default {
       mixins:[scrollMixin],
       data(){
           return{
               dataList:[],//渲染的数据列表
               pageNo:1,//第几页
               pageSize:10,//多少条
               pageNoNew :0,
           }
       },
       compoonents: {
           LoadingTip: LoadingTip,
           NodataTip: NodataTip
       },
       created(){
           this.getData();
       },
       methods:{
           getData(){//构造一个promise请求
               this.up = false;
               this.down = false;
               return this.
               $Api.getMyorder(this.pageNo,this.pageSize).
                   then(res =>{
                       if(res.code == 200){
                           if(res.data.length > 0){
                               this.dataList = this.dataList.concat(res.data);
                               this.totalBalance += res.totalBalance ;
                               this.pageNo++;
                               this.pageNoNew = this.pageNo;//上拉加载时，存储当前页
                           }
                           if(this.dataList.length >= res.total){
                               this.bol = false;//停止请求数据
                               this.upend = true;
                           }else{
                               this.bol = true;
                               this.upend = false;
                               this.up = false;
                           }
                       }else{
                           //使用cube-ui的错误提示
                           this.$createToast({
                               type: "info",
                               txt: res.message,
                               time: 1500
                           }).show()
                       }
                   })
                   // 请求成功返回异步获取的数据
                   return this.dataList
               })
        }
    }
   }
   </script>