知识点
（一）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;
}
}
}
//引入图片路径