Vue中使用VantUI的list组件下拉刷新及上拉加载功能
2023-12-13 21:54:02
template
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
JS
data() {
return {
list: [],
loading: false,
finished: false,
refreshing: false,
page:1
};
},
created(){
this.getRechargeLog()
},
methods: {
async getRechargeLog(isRefresh){
const {data:{list}} = await rechargeLog(this.page)
console.log('充值记录:',list)
//拼接列表数据
if(isRefresh){//下拉刷新
this.list = [...list.data,...this.list]
this.refreshing = false;
}else{//上拉加载
this.list = [...this.list,...list.data]
this.loading = false;
}
if(list.data.length==0){
this.finished = true;
}
console.log('接口请求出来的账单列表:',list)
},
onLoad() {
this.page++
this.getRechargeLog()
},
onRefresh() {//刷新事件
console.log('刷新事件')
this.getRechargeLog(true)
},
},
效果:(#^.^#)
文章来源:https://blog.csdn.net/qq_17211063/article/details/134833570
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!