vue-Scroller上拉加载，下拉刷新 及 element-ui分页的使用

1.官方文档地址

vue-Scroller github地址：https://github.com/wangdahoo/vue-scroller
element分页地址：https://element.eleme.io/#/zh-CN/component/pagination
移动端上拉加载，下拉刷新，及分页是基本业务场景中常见的需求，

2.vue-Scroller的使用

2.0.1 npm 安装

npm i vue-scroller -S

2.0.2 main.js全局引入

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

2.0.3 基本使用
2.0.3.1 结构

//on-refresh 对应下拉回调  on-infinite 对应上拉回调
 <scroller :on-refresh="reffor" :on-infinite="inffor" ref="scrfor">
        <div class="list" v-for="(item,i) in nodelist" :key="i">
            <ul>
               这里业务所需要的循环结构
              </ul>
          </div>
      <div style="height:100px">
            	这里的空div是占坑，解决了高度提不上去的问题
       </div>
 </scroller>

2.0.3.2 js 代码

//参数说明（需要data定义） pagesize当前页数，pSize；
    //每页下拉条数pagemax：最大页数nodelist：循环数组
    // 下拉刷新
    reffor() {
      this.pagesize = 1; //重置页数刷新每次页数都是第一页
      setTimeout(
        function() {
          this.$axios
            .post("接口地址", {
              pIndex: this.pagesize,
              pSize: 5
            })
            .then(response => {
              if (response.data.code == 1000) {
                // console.log(data);
                //这一步是判断你当前请求的这一页数据是不是最后一页，如果是最后一页
                //就不能请求了（这个根据后端给的接口判断，只要能判断出就行了，
                this.pagemax = response.data.data.pageData.totalPage;
                // 判断是下拉刷新还是上拉加载（这一步也是比较巧妙的，当然也很好理解）
                if (this.pagesize == 1) {
                  this.nodelist = response.data.data.pageData.pageList;
                } else {
                  this.nodelist = this.nodelist.concat(
                    response.data.data.pageData.pageList
                  );
                }
              }
            })
            .catch(err => {});
          this.$refs.scrfor.finishPullToRefresh(); //刷新完毕关闭刷新的转圈圈
        }.bind(this),
        1700
      );
    },
    // 上拉加载
    inffor(done) {
      if (this.pagesize >= this.pagemax) {
        this.$refs.scrfor.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
      } else {
        setTimeout(() => {
          this.pagesize++; //下拉一次页数+1
          this.$axios
            .post("接口地址", {
              pIndex: this.pagesize,
              pSize: 5
            })
            .then(response => {
              console.log(response);
              if (response.data.code == 1000) {
                // console.log(data);
                //这一步是判断你当前请求的这一页数据是不是最后一页，如果是最后一页就不能请求了
                //（这个根据后端给的接口判断，只要能判断出就行了，
                this.pagemax = response.data.data.pageData.totalPage;
                // 判断是下拉刷新还是上拉加载（这一步也是比较巧妙的，当然也很好理解）
                if (this.pagesize == 1) {
                  this.nodelist = response.data.data.pageData.pageList;
                } else {
                  this.nodelist = this.nodelist.concat(
                    response.data.data.pageData.pageList
                  );
                }
              }
            })
            .catch(err => {});
          done(); //进行下一次加载操作
        }, 1500);
      }
    }

2.0.4 注意

vue-Scroller组件需要用大盒子包裹 ，部分使用时可能会出现循环结构飘起，需要给定位解决，上拉及下拉请求必须结合定时器完成，

3.分页的使用

3.0.1结构

<el-pagination
        layout="prev, pager, next"  //组件布局
        @current-change="dateChangebirthday"   //改变是触发的函数
        :page-size="10"	//每页显示的数据
        :total="totalCount"	//总页数
        style="float:right;"	
 ></el-pagination>

3.0.2 js代码

 dateChangebirthday(val) {
 //val 对应着页数编号
 //pIndex 对应当前页数
      this.data_release.pIndex= val;
      this.getUsers_release_info()  
      //getUsers_release_info() 这里是获取总列表的数据
    },

3.0.3 注意
在向后台获取总列表数据时需要将总条数，赋值给totalCount，在做el-table时需要将每页显示条数跟pIndex保持一致