vant PullRefresh搭配List 快速实现下拉刷新上拉加载

//控制加载参数
            loading: false,//加载
            finished: false,//加载结束,没有更多了
            refreshing: false,//刷新
            list: [],//数据
//加载数据
                loadPost() {
                if (this.refreshing) {
                    this.list = []
                    this.refreshing = false
                }
                get('/getArticleList/', this.query, {
                    Type: this.type,
                    Id: this.type == 'project' ? this.pid : this.bid
                }).then(res => {
                    console.log(res)
                    this.loading = false
                    if (res.data.length == 0) {
                        console.log('加载完了')
                        this.finished = true
                        return false;
                    }
                    this.list = this.list.concat(res.data)
                    this.query.page++
                })
            }
//刷新
            onRefresh() {
                // 清空列表数据
                console.log('刷新')
                this.finished = false
                this.query.page = 1
                this.loading = true
                this.loadPost()
            }

 

posted @   可爱香草  阅读(4)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示