今天給你們分享vue上拉刷新,加載更多的組件VueScroller的使用vue
第一步安裝:npm
npm install vue-scroller -D
第二部配置 main.jsthis
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
第三部開始使用code
<scroller :on-infinite="infinite" :on-refresh = "refresh" ref="myscroller"> //內容 </scroller>
js部分以下it
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) } }