精华内容
下载资源
问答
  • 本篇文章主要介绍了vue模拟加载更多功能(数据追加),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要为大家详细介绍了vue实现滑动到底部加载更多效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 下面小编就为大家带来一篇vue中实现滚动加载更多的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 一、点击按钮后加载更多的数据显示 在 data 中,定义 pageIndex,默认为 1 ,默认展示第一页数据。定义 comments,默认为空数组,里面保存所有的评论数据,代码如下所示: data() { return { pageIndex: 1, ...

    一、点击按钮后加载更多的数据显示

    1. data 中,定义 pageIndex,默认为 1 ,默认展示第一页数据。定义 comments,默认为空数组,里面保存所有的评论数据,代码如下所示:
    data() {
        return {
            pageIndex: 1, 
            comments: []
        }
    }
    
    1. created() 生命周期函数中,调用 getComments() 方法,获取评论的数据,代码如下所示:
    created() {
        this.getComments()
    }
    
    1. methods 中,定义 getComments() 方法,调用对应的接口,拼接传入 idpageindex 的值。如果响应的状态码正确,那么就进行赋值给 comments。 每当获取新评论数据的时候,让老数据拼接上新数据,通过 concat 进行拼接,代码如下所示:
    // 获取评论数据的方法
    getComments() {
        this.$http.get('/api/getcomments/'+ this.id +'?pageindex='+ this.pageIndex).then((res) => {
            if (res.data.status === 0) {
                this.comments = this.comments.concat(res.data.message)
            } else {
                Toast('获取评论数据失败!')
            }
        })
    }
    
    1. 在页面中,通过 获取到的 comments 数据,进行相应的数据渲染。同时,在加载更多的按钮上,绑定点击的 click 事件,绑定 getMore() 事件,实现加载更多的数据,代码如下所示:
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr/>
        <textarea placeholder="请输入要吐槽的内容,最多120个字" maxlength="120" v-model="msg"></textarea>
        
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
    
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comments" :key="i">
                <div class="cmt-title">
                    第( i+1 )楼&nbsp;&nbsp;用户:{{ item.user_name}}&nbsp;&nbsp;发表时间:{{ item.add_time | dataFormat}}
                </div>
                <div class="cmt-body">
                    {{ item.content === 'undefind' ? '此用户很懒,什么都没有说' : item.content}}
                </div>
            </div>
        </div>
    
        <mt-button type="danger" size="large" plain @click="getMore()">加载更多</mt-button>
    </div>
    
    1. methods 中,定义 getMore() 事件,pageIndex 的值会自增,同时调用 this.getComments() 方法,进行数据的请求,这样就实现了点击后加载更多的数据,代码如下所示:
    // 加载到更多的数据
    getMore() {
        this.pageIndex++;
        this.getComments()
    }
    
    展开全文
  • 主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
  • vue 实现点击按钮加载更多

    千次阅读 2019-06-16 20:00:51
    <script src="https://unpkg.com/vue"> export default { props: {}, data() { return { list: [ '111', '222', '333', '444', '555', '666' ], isShow: true, txt: '显示全部', num: 2 } }, ...
    <template>
      <div>
         <div v-for="(item, key) in list" v-show="key<num">
          {{item}}
        </div>
        <span @click="showMore">{{txt}}</span>
      </div>
    </template>
    <script src="https://unpkg.com/vue"></script>
    <script>
    export default {
      props: {},
      data() {
        return {
             list: [
                '111',
                '222',
                '333',
                '444',
                '555',
                '666'
              ],
              isShow: true,
              txt: '显示全部',
              num: 2
            }
    
        
      },
      methods: {
              showMore(){
            
              this.isShow = !this.isShow;
            
              this.num = this.isShow? 2: this.list.length;
              this.txt = this.isShow?  '显示全部':'收起'
            }
    
      },
      components: {},
      mounted() {}
    };
    </script>
    
    <style  lang="scss">
    
    
    * {
      padding: 0;
      margin: 0;
    }
    </style>
    
    
    展开全文
  • 分两种情况,第一种是一次请求所有数据并分批展示;第二种是分批次请求数据。 1、一次请求 ...//判断a的值是否小于数组的长度,小于就显示点击加载更多 <div class="load-more mr-bottom" v-if="a<prod

    分两种情况,第一种是一次请求所有数据并分批展示;第二种是分批次请求数据。
    1、一次请求

    1.1 页面

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

    <div v-for="product in productLists.slice(0,pageSize)" :key="product.id" class="product -item">
    //判断a的值是否小于数组的长度,小于就显示点击加载更多
    <div class="load-more mr-bottom" v-if="a<productLists.length" @click='loadMore' >点击加载更多
    </div>
    <div class="load-more mr-bottom" v-else >没有更多了</div>
    

    1.2 data
    在data中定义pageSize的数值:

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

    2、 分多次请求

    2.1 页面

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

    2.2 data

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

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

    欢迎关注公众号Java技术大本营,会不定期分享BAT面试资料等福利。

    在这里插入图片描述


    展开全文
  • 主要介绍了vue 点击展开显示更多(点击收起部分隐藏),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本文通过实例代码给大家介绍了vue底部加载更多,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 默认显示三条数据,点击加载更多按钮加载三条 主要使用element-ui 滚动加载 <template> <div class="infinite-list-wrapper" style="overflow:auto"> <ul class="list" v-infinite-scroll=...

    vue 默认显示三条数据,点击加载更多按钮加载三条

    主要使用element-ui 滚动加载

    <template>
        <div class="infinite-list-wrapper" style="overflow:auto">
            <ul
                    class="list"
                    v-infinite-scroll="load"
                    infinite-scroll-disabled="disabled">
                <li v-for="(i,index) in countData" :key="index" class="list-item">{{ i }}</li>
            </ul>
            <p v-if="loading" @click="more">加载更多</p >
            <p v-if="noMore">没有更多了</p >
        </div>
    </template>
    
    <script>
        export default {
            data () {
                return {
                	// 数据列表
                    count: [1,2,3,4,5,6,7,8,9,0],
                    loading: false,
                    //默认显示条数
                    cou: 3,
                }
            },
            computed: {
                noMore() {
                	// 判断加载条数是否大于列表数据长度
                    return this.cou > this.count.length;
                },
                disabled() {
                	// 加载完成
                    return this.loading || this.noMore;
                },
                countData() {  // 计算属性使用切片生成新数组
                    let data = [];
                   	// 大于三条,使用切片,返回新数组
                    if (this.count.length > 3) {
                        data = this.count.slice(0, this.cou);
                        return data;
                    } else {
                    	// 否则使用原来数组,不进行切片处理
                        data = this.count
                        return data;
                    }
    
                },
            },
            methods: {
                load() {
                    this.loading = true;
                },
                more() {
                	// 每次点击加三条 
                    this.cou += 3;
                    this.loading = false;
                },
            }
        }
    </script>
    
    展开全文
  • vue开发中实现加载更多升级版

    千次阅读 2018-02-27 14:49:09
    使用vue开发的时候,特别是写后台系统的时候,一个很平常的功能就是分页的一个实现改进,之前写了一个加载更多的,但是代码显得很多,这次刚好可以优化下:首先在methods中添加一个获取数据的方法,例如:上面代码...
  • 主要介绍了vue loadmore 组件滑动加载更多源码解析,需要的朋友可以参考下
  • 加载更多 如上是HTML部分, js部分如下: 今天写了半天一直不能去页面底部,以前用jquery一直是这么写的,坑死了。 原来vue需要用nextTick才能去更新dom,气死了。所以各位小伙伴也要注意。免得...
  • 1.点击加载更多 <template> <divclass="list"> <h3>列表的懒加载</h3> <divv-for="(item,index)inlist":key="index"> <div>{{item.id}}</div> <...
  • 主要为大家详细介绍了vue瀑布流组件实现上拉加载更多,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了vue实现瀑布流组件滑动加载更多,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 下面小编就为大家分享一篇Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue底部加载更多

    万次阅读 2017-12-10 10:41:22
    // 请求的数据加载完成后,再次滚动到底部时,允许请求前一天数据 this .$nextTick(() => { this .REQUIRE = true ; this . loading = false ; }) ; }).catch(() => { this .tips = '连接失败,...
  • vue移动端列表组件,支持下拉刷新,上拉加载更多
  • 主要介绍了vue loadmore组件上拉加载更多功能示例代码,需要的朋友可以参考下
  • Vue向下滚动加载更多数据-scroll-案例

    千次阅读 多人点赞 2021-08-08 14:42:40
    vue-infinite-scroll 安装 npm install vue-infinite-scroll --save 尽管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入 import infiniteScroll from 'vue-infinite-scroll' Vue.use...
  • vue+原生模拟手机端横向滚动到底部加载更多或跳转及滚动回弹效果。可用于移动端专题展示,横向懒加载等功能。
  • 是一篇Vue.js的教程,目标在于用一种常见的业务场景——分页/无限加载,以及编写过程中自己的错误写法,分享给大家,帮助读者好的理解Vue.js中的一些设计思想。
  • 基于vue开箱即用的一部分组件上滑无限滚动加载更多,拖放刷新下图gif可能有卡顿, + 若适用就来个star吧 使用方法 首先项目中安装:npm install vue-loadmore-simple -S //main.js import LoadMore from 'vue-...
  • 一个简单的vue底部加载更多数据

    千次阅读 2019-09-10 17:38:01
    在外层div中绑定方法 <div class="start" @scroll.passive="getScroll($event...首先vue当前组件加载的时候初始化数据 data() { return { initData: [],//数据 limit:14,//一页多少个 offset:1,//第几页 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,132
精华内容 18,052
关键字:

vue点击加载更多

vue 订阅