关于 Vue 混入 (Mixin)

Vue Mixinis

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

在 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();
 }
}

在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>

关于 Vue 混入 (Mixin)

关于 Vue 混入 (Mixin)

Vue Mixinis

相关阅读更多精彩内容

友情链接更多精彩内容