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

Question

<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显示出来。

Answer 1

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

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

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

Answer 2

VUE 少年，数据驱动界面的思想没转变啊，你关心你的数据就行了， items里面的内容增加 界面就会自动改变了。

Answer 3

把新数据push到items数组就可以了

Answer 4

https://github.com/ElemeFE/vue-infinite-scroll

Answer 5

我的一个简单的vue滚动加载实现 你可以参考下https://github.com/TIGERB/easy-vue