vue-scroller實現vue單頁面的上拉加載和下拉刷新問題

在vue中如何簡單的實現頁面的上拉加載和下拉刷新，在這里我推薦使用vue-scrolle插件。

vue-scrolle的基本使用方法：

1.下載

 

npm i vue-scroller -D

 

2.導包

import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

3.項目使用

  <scroller :on-infinite="infinite"
            :on-refresh="refresh"
　　         ref="my_scroller">
       <!-- 項目內容 -->
</scroller>
<script>
　　export default {
　　　　methods:{
　　　　　　infinite(done) {   //上拉加載
　　　　　　　　if(this.noData) {
　　　　　　　　　　setTimeout(()=>{
　　　　　　　　　　　　this.$refs.my_scroller.finishInfinite(2);
　　　　　　　　　　})
　　　　　　　　　　return;
　　　　　　　　}
　　　　　　　　let self = this;
　　　　　　　　let i=1;

　　　　　　　　let start = this.list.length;
　　　　　　　　setTimeout(() => {
　　　　　　　　　　for(var k=0;k<9;k++){
                    self.list.push(k)
　　　　　　　　　　}
　　　　　　　　　　i++;
　　　　　　　　　　if(start/i < 9) {
　　　　　　　　　　　　self.noData = "沒有更多數據"
　　　　　　　　　　}
　　　　　　　　　　self.$refs.my_scroller.resize();
　　　　　　　　　　done()
　　　　　　　　}, 1500)
　　　　　　},
　　　　　　refresh:function(){         //下拉刷新
　　　　　　　　console.log('refresh')
　　　　　　　　this.timeout = setTimeout(()=>{
　　　　　　　     　this.$refs.my_scroller.finishPullToRefresh()
　　　　　　　　}, 1500)
　　　　　　}

　　　　}
　　}
</script>                

4.修改代碼

　　將模板轉成你自己想要的效果。