vue-scroller的使用实现下拉刷新上拉加载初始效果

安装vue-scroller

npm i vue-scroller -D

在main.js中：

import VueScroller from 'vue-scroller'

Vue.use(VueScroller)

主要是两个方法：:on-refresh="refresh"下拉刷新回调 :on-infinite="infinite"上拉加载回调

 
  <scroller  
 
    :on-refresh="refresh" 
 
    :on-infinite="infinite"> 
 
    <!-- content goes here     这里写需要下拉刷新，上拉加载的元素，最好是单个元素，多个元素拉动时会出现小bug--> 
 
  </scroller> 
 
  如： 
 
    <template> 
  
    　　<div id="main"> 
  
    　　　　<div class="header">xxxx</div> 
  
    　　　　<div class="scrollerBox"> 
  
    　　　　　　<scroller class="scroller" :on-infinite="infinite"//上拉加载的回调函数 
  
    　　　　　　　　　　　　　　　　　:on-refresh="refresh"//下拉刷新的回调函数 
  
    　　　　　　　　　　　　　　　　　:noDataText="'上拉加载更多数据''//上拉加载结束时，显示的文字 
  
    　　　　　　　　　　　　　　　　　refresh-layer-color="red"//下拉刷新的文字颜色 
  
    　　　　　　　　　　　　　　　　　loading-layer-color="red"//上拉加载的文字颜色 
  
    　　　　　　　　　　　　　　　　　ref="myscroller"> 
  
    　　　　　　　　<div class="content">xxx</div> 
  
    　　　　　　</scroller> 
  
    　　　　</div> 
  
    　　　　<div class="footer">底部</div> 
  
    　　</div> 
  
    </template> 
  
   scroller外部最好用一个元素包裹，将头部和底部位置留出来，scroller里面的元素不要订高，height:100%;不会生效，只有固定px高度才会生效，不过这个元素里面需要上拉加载新东西，所以不要订高 
 
   methods中写入infinite   和  refresh两个方法 
 
    infinite() {//上拉加载 
  
    　　let self = this; 
  
    　　let start = this.moveList.length; 
  
    　　setTimeout(() => { 
  
    　　　　for(let i = 0; i < 2; i++) { 
  
    　　　　　　if(start>=11){ 
  
    　　　　　　　　self.$refs.myscroller.noDataText="没有更多数据了"//更改上拉加载的文字 
  
    　　　　　　　　self.$refs.myscroller.finishInfinite(true); 
  
    　　　　　　　　return 
  
    　　　　　　} 
  
    　　　　　　self.moveList.push(i)//这是在data里的一个数组 
  
    　　　　} 
  
    　　}, 1500) 
  
    　　setTimeout(()=>{ 
  
    　　　　this.$refs.myscroller.finishInfinite(true);//停止上拉加载的动效，出现没有“"没有更多数据了”的提示，当传里面的布尔值代表isNoMoreData :Boolean，是否没有更多数据，true：没有更多数据，false：还有数据，至于有什么区别，传一下对比一下就行了 
  
    　　},1000) 
  
    }, 
  
      refresh() {//下拉刷新 
    
      　　var self=this; 
    
      　　console.log('refresh'); 
    
      　　setTimeout(function(){ 
    
      　　　　self.$refs.myscroller.finishPullToRefresh();//停止下拉刷新动效 
    
      　　},1500) 
    
      } 
    
      上面是一个简单的demo 
    
      下面奉上官方api网址： 
    
      https://www.npmjs.com/package/vue-scroller