今天给大家分享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) } }