前提问题
当页面加载数据过多时,等全部数据加载渲染完会很慢,小程序中未设置分页样式
选用了上拉加载更多的方式,一页一页的去继续加载数据
当想重新加载此页数据时,可以添加下拉刷新功能,下拉后会重新刷新此页数据
解决过程
1.上拉加载更多的主要是设置每页条数,和初始页码,默认初始加载1页,每页10条,每上拉一次会把页码加1,带着当前页码请求该页码的数据,将请求回来的新数据拼接到原本的老数据中
2.下拉刷新是利用uniapp自带API,下拉时触发此页加载方法
解决结果
上拉加载更多
页面代码
<view class="content">
内容
</view>
<view v-if="state.isLoadMore">
<uni-load-more :status="state.loadStatus" ></uni-load-more>
</view>
js代码
import {onReachBottom,onPullDownRefresh,onShow} from '@dcloudio/uni-app'
const state = reactive({
filtrate: {//请求参数
size: 10, // 条数
num: 1, // 页数
},
loadStatus:'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
isLoadMore:false, //是否加载中
taskList[],//数据
})
//进页面获取数据
onMounted(() => {
getTaskList()
})
// 获取数据
const getList = ()=>{
console.log('请求')
getProcessTask(state.filtrate).then(res=>{
if(res.records.length!==0){
//首次加载10条数据,后进行拼接
state.taskList = state.taskList.concat(res.records)
//判断接口返回数据量小于请求数据量,则表示此为最后一页
if(res.records.length<state.filtrate.size){
state.isLoadMore=true
state.loadStatus='nomore'
}else{
state.isLoadMore=false
}
}else{
state.isLoadMore=true
state.loadStatus='nomore'
}
}).catch(err => {})
}
//上拉触底函数
onReachBottom(()=>{
if(!state.isLoadMore){ //此处进行判断上锁,防止重复请求
state.isLoadMore=true
state.filtrate.num+=1//页数加1
getList()
}
})
下拉刷新
page.json
找到需要加下拉刷新的页面添加"enablePullDownRefresh":true属性
"pages": [
{
"path": "pages/tab/task/task",
"style": {
"navigationBarTitleText": "任务",
"navigationStyle": "custom",
"enablePullDownRefresh":true
}
}
],
页面js中
onPullDownRefresh(() => {
//重新触发获取数据方法,刷新接口
state.taskList=[]
state.filtrate.num = 1
getList()
//结束刷新
uni.stopPullDownRefresh()
})
附加:数据深拷贝
//数据
const state = reactive({
filtrate: {
id: '',
name: '',
uName: '',
statusList:'',
size: 10, // 条数
num: 1, // 页数
}
})
//使用JSON
let param = JSON.parse(JSON.stringify(state.filtrate))
删除对象的指定属性
delete (state.filtrate.num);
Ending~