vue项目中触底加载的实现
说明通过vue开发的移动端项目中,经常会有触底加载的需求。该需求可以通过vue-scroller实现。安装通过下面的命令来进行安装:npm install vue-scroller -S配置安装完成后可以通过下面的方式在项目中进行配置。在main.js中配置方式如下:import VueScroller from 'vue-scroller'// 触底加载Vue.use(VueScroller)
·
说明
通过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)
}
完整的参数如下:
点击这里查看更多详细的内容。
更多推荐
已为社区贡献1条内容
所有评论(0)