vue开发APP，结合vue-scroller实现上拉加载更多，下拉刷新数据的功能

vue开发APP，结合vue-scroller实现上拉加载更多，下拉刷新数据的功能，没有一点问题，易懂

1、下载vue-scroller依赖包并在main.js中引用

npm i vue-scroller -D            ————下载依赖包
import VueScroller from 'vue-scroller';       ——————main.js中引入
Vue.use(VueScroller);

2、在要实现刷新加载效果的元素外包裹scroller标签，一般都是ul,或者框架的list外围，

<scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller"> 
   //这里我用到的UI框架是museUI
    <mu-list textline="three-line" ref="container">   
    </mu-list>
 </scroller>

<scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller"> 
   //原生ul也可以
    <ul><ul>
 </scroller>

3、要想实现刷新和加载更多，必须要让后台写好分页功能，所以我们在data里也必须要定义好以下几个变量

data() {
      return {
        page: 1,    //页码
        limit: 10,    //每页显示几条数据
        totalPage:0,   //总页码
        menuItem: [],  //列表数据
      }
    }

4、methods定义方法

	  loadData(page,  limit) {
        QYLB(page,  limit).then(res => {    
  //发送请求，按自己的来写，该传多少参数就传多少
          this.totalPage = res.data.totalPage;
          if (this.page == 1) {  //当前页码若为1，则直接等于返回的数据
            this.menuItem = res.data.list;
          } else {    //当前页码不为1，则将返回的数据拼接到之前已获取到的数组后
            this.menuItem = this.menuItem.concat(result.data.data.list)
          }
        });
      },
      refresh() {   //下拉刷新
        this.page = 1;//重置页码，每次刷新后页码均为第一页
        setTimeout(function () {
          this.loadData(this.page, this.limit);
          this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
        }.bind(this), 1700)
      },

      //上拉加载更多
      infinite(done) {
        if (this.page >= this.totalPage) {  
         //若当前页码大于或等于总页码，则不再加载数据，提示没有更多数据
          this.$refs.myscroller.finishInfinite(true);//这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
        } else {
          setTimeout(() => {
            this.page++;//下拉一次页数+1
            this.loadData(this.page, this.limit);
            done();//进行下一次加载操作
          }, 1500);
        }
      },

5、值得注意的是，写好之后，可能样式上会出现问题，是因为scroller标签高度的问题，我检查元素后，加了如下样式

._v-container {
    top: 125px!important;   //这是我页面头部的高度
    height: calc(100% - 125px)!important;   //高度给100%，然后减去头部高度
    overflow-y: auto;
  }