Vue——轻松实现vue底部点击加载更多

前言

需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈

一次请求

页面

使用slice来进行限制展现从0,a的数据

<div v-for="user in draw_user.slice(0,a)" :key="user.uid" class="user-item">

//判断a的值是否小于数组的长度,小于就显示点击加载更多 <div class="load-more mr-bottom" v-if="a<draw_user.length" @click='loadMore' >点击加载更多</div> <div class="load-more mr-bottom" v-else >没有更多了</div>

data

在data中定义a的数值

 data() {
        return {
            a:20
        };
}

methods

在methods定义loadMore方法

 methods: {
        loadMore:function(){
          this.a+=20;
        }

分布请求

这个需要和后端进行配合,不过很简单,后端对数据进行下分页就可以了

页面

 <div class="load-more mr-bottom" v-if="page<page_count"  @click='loadMore' >点击加载更多</div>
 <div class="load-more mr-bottom" v-else >没有更多了</div>

 

data

data() {
        return {
            page:1,
            page_count:''
        };
    },

 

 

methods

在methods定义loadMore方法

复制代码
loadMore:function(){
          this.page+=1;
          this.getDrawPrize({
                    current_page:this.page //请求页数
                })
                .then(ret => {
                    console.log(ret.data.code_result)
                    this.code_result = this.code_result.concat(ret.data.code_result); //将请求回来的数据和上一次进行组合
                })
                .catch(err => {
                    this.$toast.fail("系统开小差,请重试");
                });
        },
复制代码

 

posted @   。思索  阅读(12073)  评论(0编辑  收藏  举报
编辑推荐:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 一个费力不讨好的项目,让我损失了近一半的绩效!
点击右上角即可分享
微信分享提示