Vue中使用VantUI的list组件下拉刷新及上拉加载功能

最新推荐文章于 2024-08-02 10:20:05 发布

前端-文龙刚

最新推荐文章于 2024-08-02 10:20:05 发布

阅读量563

点赞数

分类专栏： Vue 文章标签： vue.js list windows

本文链接：https://blog.csdn.net/qq_17211063/article/details/134833570

版权

Vue 专栏收录该内容

98 篇文章 2 订阅

订阅专栏

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>

 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)
        },
},

效果：(#^.^#)