美文网首页
关于 Vue 混入 (Mixin)

关于 Vue 混入 (Mixin)

作者: 王二麻子88 | 来源:发表于2020-12-17 00:10 被阅读0次

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>
    

相关文章

  • vue混入是什么?简单聊一下vue混入

    一、vue混入是什么? 关于vue的混入官方给出的解释是混入 (mixin) 提供了一种非常灵活的方式,来分发 V...

  • 关于 Vue 混入 (Mixin)

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

  • 理解Vue.mixin,利用Vue.mixin正确的偷懒

    关于Vue.mixin在vue官方文档中是这么解释的: 混入 (mixin) 提供了一种非常灵活的方式,来分发 V...

  • vue 组件的理解

    Vue.mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对...

  • vue混入mixin

    Vue.mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对...

  • vue mixin

    混入 mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象...

  • vue mixin(混入)

    目的 增强组件功能的可复用性,一个混入对象可以包含任意组件选项

  • vue混入mixin

    mixin主要作用是提取组件中相同的代码,对生命周期、methods、components、data都可以做提取,...

  • Vue混入(mixin)

    理解:一个混入对象可以包含任意组件选项,这些选项将混入到组件本身的选项;作用:用来分发Vue组件中的可服用功能; ...

  • vue 混入 (mixin)

    何为混入? 混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”。但是与继承不同的是,继承一...

网友评论

      本文标题:关于 Vue 混入 (Mixin)

      本文链接:https://www.haomeiwen.com/subject/enragktx.html