说明

通过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)
}

完整的参数如下:
在这里插入图片描述

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

Logo

前往低代码交流专区

更多推荐