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

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 少年,数据驱动界面的思想没转变啊,你关心你的数据就行了, items里面的内容增加 界面就会自动改变了。


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


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


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


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

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

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

【热门文章】
【热门文章】