知識點
（一）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;
}
}
}
//引入圖片路徑