vue2-elm学习记录（Day4）

知识点

（一）v-load-more实现上拉加载
vue通过自定义指令实现loadMore上拉加载，实现方法：
common.js：

export const getStyle=(element,attr,NumberMode='int')=>{
    let target;
    if(attr==='scrollTop'){
        target=element.scrollTop;
    }
    else if(element.currentStyle){
        target=element.currentStyle[attr];
    }
    else{
        target=document.defaultView.getComputedStyle(element,null)[attr];
        //在获取opacity时需要获取小数parseFloat
        return NumberMode=='float' ? parseFloat(target):parseInt(target);
    }

}

mixmin.js:

import {getStyle} from './common'

export const loadMore = {
    directives: { 
        'load-more': {
            bind: (el, binding) => { //只调用一次，指令第一次绑定到元素时调用
                let windowHeight = window.screen.height;
                let height;
                let setTop;
                let paddingBottom;
                let marginBottom;
                let requestFram;
                let oldScrollTop;
                let scrollEl;
                let heightEl;
                let scrollType = el.attributes.type && el.attributes.type.value; //获取元素的属性是获取的对象而非数组
                let scrollReduce = 2;
                if (scrollType == 2) {
                    scrollEl = el;
                    heightEl = el.children[0];
                } else {
                    scrollEl = document.body;
                    heightEl = el;
                }
 
                el.addEventListener('touchstart', () => {
                    height = heightEl.clientHeight;
                    if (scrollType == 2) {
                        height = height
                    }
                    setTop = el.offsetTop;
                    paddingBottom = getStyle(el, 'paddingBottom');
                    marginBottom = getStyle(el, 'marginBottom');
                }, false)
 
                el.addEventListener('touchmove', () => {
                    loadMore();
                }, false)
 
                el.addEventListener('touchend', () => {
                    oldScrollTop = scrollEl.scrollTop;
                    moveEnd();
                }, false)
 
                const moveEnd = () => {
                    requestFram = requestAnimationFrame(() => {
                        if (scrollEl.scrollTop != oldScrollTop) {
                            oldScrollTop = scrollEl.scrollTop;
                            moveEnd()
                        } else {
                            cancelAnimationFrame(requestFram);
                            height = heightEl.clientHeight;
                            loadMore();
                        }
                    })
                }
 
                const loadMore = () => {
                    if (scrollEl.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
                        binding.value();
                    }
                }
            }
        }
    }
}

loadMore.vue

（二）实现效果：
默认展示20条数据

列表部分封装成为一个组件。
在msite.vue拿到数据的时候将位置信息传递给子组件，用于子组件进行数据请求。
msite.vue部分：

shoplist组件
template部分的功能：默认数据展示/上拉加载/返回顶部/加载动画
(1)默认数据展示

    
        
        

            
            
               
               

                
               
               
               

                
                

                    
                    

                        {{item.name}}
                    
                    
                    

                        

                            {{item.icon_name}}
                        
                    
                
                
                

                    
                    

                        

                            {{item.rating}}
                        
                        

                            月售{{item.recent_order_num}}单
                        
                    
                    
                    
                    

                        
                            {{item.delivery_mode.text}}
                        
                        准时达
                    
                    
                
                
                

                    

                        ￥{{item.float_minimum_order_amount}}起送
                        /
                        {{item.piecewise_agent_fee.tips}}
                    
                    

                        
                            {{item.distance>1000?(item.distance/1000).toFixed(2)+'km':item.distance+'m'}}
                            /
                        
                        {{item.distance}}
                        /
                        {{item.order_lead_time}}
                    
                
                
               
            
        
        
        ...
        
没有更多了
    

JS部分：

//引入getData中引入获取商铺列表的方法
import {shopList} from "../../service/getData.js"
//引入图片基础路径
import {imgBaseUrl} from "../../config/env.js";
//引入上拉加载和获取图片路径的方法
import {loadMore,getImgUrl} from "../../components/common/mixin.js";
//引入mapState辅助函数
import {mapState} from "vuex"
export default{
    data(){
        //批次加载店铺列表，每次加载20个limit-20
        offset:0,
        //店铺列表数据
        shopListArr:[],
        //没有更多数据
        touched:false,
        //到达底部加载数据，防止重复加载
        preventRepeatReuqest: false,
        //显示加载动画
        showLoading:true,
        //图片基础路径
        imgBaseUrl
    },
    mixins:[loadMore,getImgPath],
    mounted(){
        this.initData();
    },
    computed:{
        ...mapState(["latitude","longitude"])
    },
    props:["geohash"],
    methods:{
    //获取默认店铺列表
    async initData() {
         //获取数据
        let res=await shopList(
            this.latitude,
            this.longitude,
            this.offset,
            this.restaurantCategoryId
        )
        this.shopListArr=[...res];
        //每次加载20个，加载到第二十个的时候触底
        if(re.length<20){
            this.touched=true;
        }
     },
     //
     zhunshi(supports){
        let zhunStatus;
        if(supports instanceof Array && supports.length){
            supports.forEach(item=>{
                if(item.icon_name==="准"){
                    zhunStatus=true;
                }
            });
        }
        else{
            zhunStatus=false;
        }
        return zhunStatus;
     
     }
     
     
    }
       
}
//引入图片路径

Demo学习链接:
https://github.com/bailicangdu/vue2-elm