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

<template>
   <div class="my_order">
       <ul v-load-more="loaderMore" type="1">
            <li class="order" v-for="(orderListAll,index) in ordersAll" :key="index">
            
            </li>
            <li class="more_loading" v-if="touched">
                无更多
            </li>
       </ul> 
   </div>
</template>

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

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

<shop-list v-if="hasGetData" :geohash="geohash"></shop-list>

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

<div class="shoplist_container">
    <!--上拉加载模块引入 s-->
        <!--shopListArr商铺数据列表不为空-->
        <ul v-load-more="loadMore" v-if="shopListArr.length" type="1">
            <!--router-link的tag属性：具有tag属性的router-link会被渲染成相应的标签-->
            <router-link :to="{path:'shop',query:{geohash,id:item.id}}"
               v-for="item in shopListArr" tag="li" :key="item.id" class="shop_li">
               <!--图片-->
               <section>
                <img :src="imgBaseUrl+item.image_path" class="shop_img">
               </section>
               <!--hgroup标签用来对标题元素进行分组，当标题有多个层级(副标题)时，
               hgroup元素被用来对一系列<h1>、<h6>元素进行分组-->
               <hgroup class="shop_right">
                <!--标题-->
                <header class="shop_detail_header">
                    <!--是否显示品牌图标-->
                    <h4 :class="item.is_premium?'premium':''">
                        {{item.name}}
                    </h4>
                    <!--支持-->
                    <ul class="shop_detail_ul">
                        <li v-for="item in item.supports" 
                            :key="item.id" class="supports">
                            {{item.icon_name}}
                        </li>
                    </ul>
                </header>
                <!--评分销量信息-->
                <h5 class="rating_order_num">
                    <!--左侧信息 s-->
                    <section class="rating_section">
                        <section class="rating_section">
                            <span>{{item.rating}}</span>
                        </section>
                        <section class="order_section">
                            月售{{item.recent_order_num}}单
                        </section>
                    </section>
                    <!--左侧信息 e-->
                    <!--右侧信息 s-->
                    <section class="rating_order_num_right">
                        <span class="delivery_style delivery_left"
                            v-if="item.delivery_mode">
                            {{item.delivery_mode.text}}
                        </span>
                        <span class="delivery_style delivery_right" v-if="zhunshi(item.supports)">准时达</span>
                    </section>
                    <!--右侧信息 e-->
                </h5>
                <!--起送信息 s-->
                <h5 class="fee_distance">
                    <p class="fee">
                        ￥{{item.float_minimum_order_amount}}起送
                        <span class="segmentation">/</span>
                        {{item.piecewise_agent_fee.tips}}
                    </p>
                    <p class="distance_time">
                        <span v-if="Number(item.distance)">
                            {{item.distance>1000?(item.distance/1000).toFixed(2)+'km':item.distance+'m'}}
                            <span class="segmentation">/</span>
                        </span>
                        <span v-else>{{item.distance}}</span>
                        <span class="segmentation">/</span>
                        <span class="order_time">{{item.order_lead_time}}</span>
                    </p>
                </h5>
                <!--起送信息 e-->
               </hgroup>
            </router-link>
        </ul>
        <!--shopListArr商铺数据列表为空，暂时省略，这里即加载动画区域-->
        ...
        <p v-if="touched" class="empty_data">没有更多了</p>
    <!--上拉加载模块引入 e-->

</div>

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