vue.js+ajax怎么样实现滚动加载

问题描述

问 题

<div class="example_top">JinKey最新收藏</div>
<ul>
  <li v-for="item in items">
    
      <span class="title_content">{{item.title}}</span>
    
  </li>
</ul>

本来只有一个span，滚动加载后使用AJAX得到新数据，要怎么样把新数据用第二个span显示出来。

解决方案

加载和显示新数据在vue里最简单了，往你的数据中添加新的值就可以了：

methods: {
    loadMore: function() {
        yourAjaxMethod(function(moreData) {
            this.items.push(moreData);
        }.bind(this));
    }
}

另外一个问题就是如何触发loadMore，这里像你说的，滚动。所以你需要监听下scroll事件或者使用其他滚动插件比如iscroll，在对应的回调里调用loadMore

这篇关于vue.js+ajax怎么样实现滚动加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！