uniapp下拉加载刷新_uniapp list reload-CSDN博客

本文链接：https://blog.csdn.net/Guoyu1_/article/details/109454230

该博客展示了前端页面的布局代码，包含列表循环展示元素。同时给出了数据定义，如报销费用相关数据。还介绍了页面加载、卸载、触底加载、下拉刷新等方法，实现数据的初始化和加载逻辑，属于前端开发范畴。

1.布局

<ul>
<li class="box" v-for="(item, index) in list" :key="index" @tap="goEAList(item.id)">
<view class="left">
<view class="box_tit">
<view class="box_tit_l">
{{ item.name }}
<view class="blue" style="background: #4d8af7">{{ item.state }}</view>
</view>
<text class="time">{{ item.time }}</text>
</view>
<view class="box_money">￥{{ item.money }}</view>
<view class="box_txt">{{ item.message }}</view>
</view>
<view class="right">
<view class="ri_img">
<image class="img" src="../../static/ri.png"></image>
</view>
</view>
</li>
</ul>
<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>

2.data

dataList: [
{
id: 1,
name: '研发部门出差费用报销',
state: '审批中',
time: '2020-09-27',
money: 400,
message: '差旅补贴'
},
{
id: 2,
name: '研发部门出差费用报销',
state: '审批中',
time: '2020-09-27',
money: 400,
message: '差旅补贴'
},
{
id: 3,
name: '研发部门出差费用报销',
state: '审批中',
time: '2020-09-27',
money: 400,
message: '差旅补贴'
},
{
id: 4,
name: '研发部门出差费用报销',
state: '审批中',
time: '2020-09-27',
money: 400,
message: '差旅补贴'
},
{
id: 5,
name: '研发部门出差费用报销',
state: '审批中',
time: '2020-09-27',
money: 400,
message: '差旅补贴'
},
...
],
list: [],
loadMoreText: "加载中...",
showLoadMore: false,
listMax: -1

3.方法

onLoad() {
this.initData();
},
onUnload() {
this.listMax = 0,
this.list = [],
this.loadMoreText = "加载更多",
this.showLoadMore = false;
},
onReachBottom() {
let num = this.dataList.length - 5;
if (this.listMax > num) {
this.loadMoreText = "没有更多数据了!"
return;
}
this.showLoadMore = true;
setTimeout(() => {
this.setListData();
}, 300);
},
onPullDownRefresh() {
this.initData();
},
methods: {
initData(){
setTimeout(() => {
this.listMax = -1;
this.list = [];
let data = [];
this.listMax += 4;
for (var i = this.listMax - 3; i < this.listMax + 1; i++) {
data.push(this.dataList[i])
}
this.list= this.list.concat(data);
uni.stopPullDownRefresh();
}, 300);
},
setListData() {
let data = [];
this.listMax += 3;
for (var i = this.listMax - 2; i < this.listMax + 1; i++) {
data.push(this.dataList[i])
}
this.list= this.list.concat(data);
},
},