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

时间:2023-10-08 14:18:08

安装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