vue项目中触底加载的实现

说明

通过vue开发的移动端项目中，经常会有触底加载的需求。该需求可以通过vue-scroller实现。

安装

通过下面的命令来进行安装：

npm install vue-scroller -S

配置

安装完成后可以通过下面的方式在项目中进行配置。

在main.js中配置方式如下：

import VueScroller from 'vue-scroller'  // 触底加载

Vue.use(VueScroller) // 使用组件

使用方式

使用方式非常简单，只需要使用scroller放在所有的组件外层。
如下：

<scroller 
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here -->
</scroller>

可以在methods里面设置好callback。

refresh() {
  console.log(123)
},
infinite(done) {
  // console.log(456)
  setTimeout(function() {
    console.log(456)
    done(456)
  }, 1000)
}

完整的参数如下：

点击这里查看更多详细的内容。