uniapp实现下拉加载更多 u-loadmore
区别于官网教程,这里总结更为白话。要实现的需求是,比如起初有十条数据,下拉至底部,追加某数量的数据。比如我的项目中,我把它放在了数据展示的底部,上代码:<view><template><u-card :data="tableData" v-for="(item) in tableData" :key="item.id" :show-head="false" >&
·
区别于官网教程,这里总结更为白话。
要实现的需求是,比如起初有十条数据,下拉至底部,追加某数量的数据。
比如我的项目中,我把它放在了数据展示的底部,上代码:
<view>
<template>
<u-card :data="tableData" v-for="(item) in tableData" :key="item.id" :show-head="false" >
<view class="" slot="body">
<view class="u-body-item u-flex u-row-between u-p-b-0">
<view class="u-body-item-title u-line-2 u-flex u-row-between">
仓库:{{item.storageName}}
</view>
</view>
<view class="u-body-item u-flex u-row-between u-p-b-0">
<view class="u-body-item-title u-line-2 u-flex u-row-between">
品类:{{item.pinleiName}}
品目:{{item.pinmuName}}
</view>
</view>
<view class="u-body-item u-flex u-row-between u-p-b-0">
<view class="u-body-item-title u-line-2">名称:{{item.name}} 规格:{{item.guige}} 型号:{{item.xinghao}}</view>
</view>
<view class="u-body-item u-flex u-row-between u-p-b-0">
<view class="u-body-item-title u-line-2">数量:{{item.shuliang}} 单位:{{item.danwei}}</view>
</view>
</view>
</u-card>
<view class="wrap">
<u-loadmore :status="status" />
</view>
</template>
</view>
此处强调的是u-loadmore。
通过status
设置组件的状态,加载前值为loadmore
,加载中为loading
,没有数据为nomore
加载前,显示"加载更多",加入点击可选,是因为数据不够一页时,无法触发页面的onReachBottom
生命周期加载中,显示"正在加载...",2种动画可选加载后,如果还有数据,回到"加载前"状态,否则加载结束,显示"没有更多了"
核心功能是onReachBottom函数:注意不在methods里面
onReachBottom() {
if(this.currentPage >= this.pages) return ;
this.status = 'loading';
this.currentPage = ++ this.currentPage;
setTimeout(() => {
this.getTongji()
if(this.currentPage >= this.pages) this.status = 'nomore';
else this.status = 'loading';
}, 1000)
},
这里的currentPage是当前的页码,pages是总页数,
方法生效时,当前页码自增加一,调用查询数据的方法:
getTongji:function(){
this.$u.api.getTongji({"material":this.searchForm,"currentPage":this.currentPage,"pageSize":this.pageSize}).then(res=>{
if(res.code==200){
res.data.records.forEach(e=>{
this.tableData.push(e)
})
this.pages=res.data.pages
this.currentPage=res.data.current
this.totalCount=res.data.total
}else if(res.code==401){
uni.navigateTo({
url:"../login/login"
})
}else{
uni.showToast({
title:"加载错误",
icon:"none",
})
}
})
},
注意成功之后的数据应该push进数组中,而不是直接等于,否则就是下拉换页的效果了。
更多推荐
已为社区贡献4条内容
所有评论(0)