背景：
測試APP時，發現列表數據上拉加載有毛病，要么顯示不了所有數據，要么顯示的數據有重復。經查看，是獲取數據的API有分頁參數（page和size），但是只是分頁，而不是分段。換句話說，查詢第二頁的數據會連同第一頁的數據一起返回，為了鍛煉自己，決定從有瑕疵的前端解決這個問題。
思路：
1、獲取數據的分段處理
(1)無數據
- 不顯示加載狀態欄
- 顯示無數據信息提示
(2)有數據
-
動態設置API參數取值
加載數據時動態改變API參數值，這里設置time來控制，追加數據時time++，確保查詢的追加數據條數比上次獲取的數據多十條。
-
分段截取數據
以index為索引連續抽取十條數據放進定義的數組listArr（相當於中轉器）中，根據reload值判斷數據是第一次加載還是再次加載（這里統一說成追加數據）
-
組合分段數據顯示
將截取的追加數據和第一次加載的數據連接起來賦給最終list，通過template中的v-for循環顯示在客戶端
2、加載狀態切換處理
(1)渲染初加載完頁面設置為‘上拉加載更多’
(2)上拉到底設置為‘加載中’，這里通過判斷是否為追加數據進行設置
(3)數據加載完畢設置為‘沒有更多’
根據傳遞的條數值size和實際得到數據長度之差來判斷數據是否加載完畢，如果不為0則表示加載完畢，此時設置loadingFlag控制上拉到底時不再觸發數據加載
代碼：
<template>
<view class="">
<view class="tishiXinxi" v-if="anzhuangXinxi">
沒有現場安裝申請信息
</view>
<view class="apply_list_box" v-for='(item,index) in list' :key="index">
<view class="apply_list">
<image class="photo_head" src="/static/qingjia_bg.png" mode=""></image>
<view class="apply_list_text">
<view class="text_1">{{item.processDefinitionName}}</view>
<button type="primary" @tap="riZhi" :data-id='item.id'>流程日志</button>
<view class="text_2">{{item.startTime}}</view>
</view>
</view>
<view class="xiaoxi_line"></view>
</view>
<uni-load-more :status="status" :content-text="contentText" /><!-- 加載列表 -->
</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
var app = getApp();
export default {
data() {
return {
proInstId: '',
templateId:'',
last_id: '',
list:[],
anzhuangXinxi:false,
reload:true,//判斷是否為第一輪加載，以便賦予index值
time:2,//該值是為了動態更新向服務器傳遞的參數值
index:0,//為獲取的數據進行分段處理，十條數據一加載
loadingFlag:true,//判斷是否繼續上拉加載數據
status: 'more',//加載狀態
contentText: {
contentdown: '上拉加載更多',
contentrefresh: '加載中',
contentnomore: '沒有更多'
}
};
},
onLoad(option) {
this.templateId = option.templateId;
},
onShow(){
this.getList();
},
onReachBottom() {
if(this.loadingFlag==true){
this.status = 'more';
this.getList();
}
},
methods: {
getList: function(){
var that = this;
var Authorization = app.globalData.Authorization;
const data = {
'流程模板key':'process_setup',
page:1,
size:10
};
if (that.last_id) {
//說明已有數據，目前處於上拉加載
that.status = 'loading';
data.size = 10*that.time;
that.time++;
}
console.log("data:"+JSON.stringify(data));
this.$servers
.globalRequest('actApi/my', 'POST', data, Authorization)//此處封裝了AJAX，只要能獲取到接口數據，怎樣都成
.then(res => {
let listData = res.data.data;
console.log("listData:"+listData.length);
var num = data.size-listData.length;
var listArr= [];
if(that.reload==true && listData.length==0){
that.anzhuangXinxi = true;
that.contentText = '';
return false;
}else{
if(that.reload==false){
that.index +=10;
}
if(num!=0){
that.status = 'noMore';
that.loadingFlag = false;
}
for(var j=that.index;j<(that.index+10>=listData.length?listData.length:that.index+10);j++){
listArr.push(listData[j]);
}
that.last_id = listArr[listArr.length-1].id;
that.list = that.reload ? listArr : that.list.concat(listArr);
that.list.sort(function(a, b) {
return a.startTime < b.startTime ? 1 : -1;
});
this.reload = false;
}
})
.catch(parmas => {});
}
}
};
</script>
總結：
大神都推薦輸出學習法，如今一試發現自己更菜了：在實現這一功能的過程中，腦子里想了很多東西，感覺很復雜，實現后成就感滿滿，現在將思路重新捋了捋，折成文字也就幾百個字，真是汗顏。不過把思路整理出來也蠻有滿足感的，繼續堅持哈。