vue pull-to下拉滚动加载请求分页（无敌那）

因为移动端滚动加载分页是必须做的，网上也有很多插件，我用的是pull-to,这个很简单，先安装一波，

npm install vue-pull-to --save

//然后引进来,放在组件上面注册好

import PullTo from 'vue-pull-to'

官网文档在这里：https://github.com/stackjie/vue-pull-to/blob/master/README.zh-CN.md

现在我要根据我的项目来给大家说一下操作和坑：

<div id="pullContain">
  <pull-to @infinite-scroll="getMoreList" class="file-lists">
    <ul>
      <li v-for="(fileItem,index) in filesList.fileList" :key="index" @click="dealFile(fileItem)">
      </li>
      <span  class="show-msg" v-show="filesList.recordCount==0">这里什么都没有了哦</span>
    </ul>
  </pull-to>
</div>

上面的infinte-scroll方法指的是下拉到底部的时候触发的函数，我让他进入getMoreList这个方法中，其他方法效果可以参考官方文档，但是有个坑一定一定要注意，

组件会默认占据父元素的百分之百高度，一定要注意给一个高度，反正就是让组件占父元素的100%,否则不管你怎么下拉都不会触发函数，这个操作就很简单，能触发了，关键是怎么去请求更多

下面我贴下我getMoreList的代码：

 getMoreList(loaded){
        this.pageNum++;
        var that = this;
        if (!that.loaded) {
          that.isShowLoading=true;
          var params = {
                familyId: this.familyId,
                pageNum: this.pageNum,
                iconOption:1,
                pageSize: this.pageSize
        }
        if(this.$route.params.fileId!=this.familyId){
          params.folderId =this.$route.params.fileId;
        }
          this.$axios.get( //传参发起请求    
            "https://home.cloud.189.cn/fmFile/listFiles.action", {
              params
            }
          ).then(function (response) { //接口返回数据
            console.log(Math.ceil(response.data.recordCount/response.data.pageSize));
            if (that.pageNum ==Math.ceil(response.data.recordCount/response.data.pageSize)) {//
              that.loaded = true;
            }
            that.filesList.fileList.push(...response.data.fileList); //push进去渲染
             that.isShowLoading=false;
             that.ShowLoadingTip="没有更多了";
            // loaded && loaded("done");
          }, function (error) {
            that.pageNum--;
            console.log("error");
          })
        }

load参数是默认传进来的，其实就是很简单的事情，当下拉到底部的时候，我们就向后台请求pageNum+1的数据，其中上述的params的那些字段是我这边的接口必须的，你可以根据你的来写，然后push到当前的列表上继续渲染出来，那什么时候停止呢，就是当你的pageNum等于后台的总页数的时候，你把loaded=true,它就不进入这个函数去发请求到后台拿数据了，所以刚开始的时候给loaded为false一个初始值。

上述还有那些showloadingTip你不用管，那是我另外加的提高用户体验的而已。一个滚动下拉加载请求分页就完成了，有什么问题可以留言讨论哈，大家一起努力。

vue pull-to下拉滚动加载请求分页（无敌那）

猜你喜欢