今天给大家分享vue上拉刷新,加载更多的组件VueScroller的使用
第一步安装:
npm install vue-scroller -D
第二部配置 main.js
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
第三部开始使用
<scroller :on-infinite="infinite" :on-refresh = "refresh" ref="myscroller">
//内容
</scroller>
js部分如下
methods:{
//上拉加载
infinite:function(){
console.log('infinite')
this.timeout = setTimeout(()=>{
if (this.myData.length >= 20) {
this.$refs.my_scroller.finishInfinite(true);
}else{
this.$refs.my_scroller.finishInfinite(false);
}
//this.$refs.my_scroller.resize();//已弃用,
this.myData.push(this.myData[1]);
}, 1500)
},
//下拉刷新
refresh:function(){
console.log('refresh')
this.timeout = setTimeout(()=>{
this.$refs.my_scroller.finishPullToRefresh()
}, 1500)
}
}
大家可以复制代码进行尝试,试一下效果