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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。