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

最新推荐文章于 2025-03-21 19:24:31 发布

一只大花卷er

最新推荐文章于 2025-03-21 19:24:31 发布

阅读量1.7k

点赞数 1

文章标签： javascript vue.js

原文链接：https://www.cnblogs.com/wangyang0210/p/10309348.html

版权

这篇博客探讨了在前端应用中如何使用Vue.js实现数据分页加载和无限滚动功能。通过设置变量`a`限制显示数据的数量，并在用户点击“加载更多”时动态增加显示条目。同时，介绍了如何结合后端进行分页处理，通过`loadMore`方法更新`page`值并请求新一页数据。文章强调了正确处理数据组合和错误提示的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一次请求

页面
使用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("系统开小差,请重试");
                });
        },