UNI-APP上拉分段加载数据
<h2 id="背景">背景：</h2><p> 测试APP时，发现列表数据上拉加载有毛病，要么显示不了所有数据，要么显示的数据有重复。经查看，是获取数据的API有分页参数（page和size），但是只是分页，而不是分段。换句话说，查询第二页的数据会连同第一页的数据一起返回，为了锻炼自己，决定从有瑕疵的前端解决这个问题。</p>
<h2 id="思路">思路：</h2>
<h3 id="1获取数据的分段处理">1、获取数据的分段处理</h3>
<h4 id="1无数据"> (1)无数据</h4>
<ul>
<li>不显示加载状态栏</li>
<li>显示无数据信息提示</li>
</ul>
<h4 id="2有数据"> (2)有数据</h4>
<p><img src="https://img2020.cnblogs.com/blog/1672584/202009/1672584-20200917160111920-876930886.png"></p>
<ul>
<li>
<p>动态设置API参数取值</p>
<blockquote>
<p>加载数据时动态改变API参数值，这里设置time来控制，追加数据时time++，确保查询的追加数据条数比上次获取的数据多十条。</p>
</blockquote>
</li>
<li>
<p>分段截取数据</p>
<blockquote>
<p>以index为索引连续抽取十条数据放进定义的数组listArr（相当于中转器）中，根据reload值判断数据是第一次加载还是再次加载（这里统一说成追加数据）</p>
</blockquote>
</li>
<li>
<p>组合分段数据显示</p>
<blockquote>
<p>将截取的追加数据和第一次加载的数据连接起来赋给最终list，通过template中的v-for循环显示在客户端</p>
</blockquote>
</li>
</ul>
<h3 id="2加载状态切换处理">2、加载状态切换处理</h3>
<h4 id="1渲染初加载完页面设置为上拉加载更多"> (1)渲染初加载完页面设置为‘上拉加载更多’</h4>
<h4 id="2上拉到底设置为加载中这里通过判断是否为追加数据进行设置"> (2)上拉到底设置为‘加载中’，这里通过判断是否为追加数据进行设置</h4>
<h4 id="3数据加载完毕设置为没有更多"> (3)数据加载完毕设置为‘没有更多’</h4>
<p> 根据传递的条数值size和实际得到数据长度之差来判断数据是否加载完毕，如果不为0则表示加载完毕，此时设置loadingFlag控制上拉到底时不再触发数据加载</p>
<h2 id="代码">代码：</h2>
<pre><code><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);
}
that.last_id = listArr.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>
</code></pre>
<h2 id="总结">总结：</h2>
<blockquote>
<p>大神都推荐输出学习法，如今一试发现自己更菜了：在实现这一功能的过程中，脑子里想了很多东西，感觉很复杂，实现后成就感满满，现在将思路重新捋了捋，折成文字也就几百个字，真是汗颜。不过把思路整理出来也蛮有满足感的，继续坚持哈。</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/nmrnzb/p/13689835.html
頁:
[1]