用vue-pull-to完成手机端的上拉加载

安装vue-pull-to

npm install vue-pull-to --save

在需要的组件中引用并注册

import PullTo from 'vue-pull-to'
...
components: {PullTo},

使用组件

<pull-to
        :bottom-load-method="infiniteHandler"
        :is-top-bounce=false
        :bottom-config="BOTTOM_DEFAULT_CONFIG">
</pull-to>

将这段代码套在需要完成上拉加载的外面需要注意的是，vue-pull-to的父组件必须要给定高度，否则移动端上拉手势失效

pull-to提示文字的配置

 BOTTOM_DEFAULT_CONFIG: {
          pullText: "上滑继续加载",
          triggerText: "释放更新",
          loadingText: "加载中,请稍后",
          doneText: "内容已全部展示了",
          failText: "加载失败",
          loadedStayTime: 1000,
          stayDistance: 50,
          triggerDistance: 50,
          list: ""
        },

这里讲一下对上拉加载的理解，后台对展示数据做了分页处理，屏幕上默认展示第一页，当拉到底部时，使页数加一，在请求后台数据，并将其加入到之前的数组。屏幕拉到底部的函数时间pull-to组件已经自己设置好了，不需要再去处理，这里贴一下拉到底部后请求后台数据的代码

  infiniteHandler(loaded) {
            this.pages++;//页码数加一
            console.log(this.pages);
            this.$http({
              url: '接口',
              method: 'post',
              data: {
               参数：数值
              }
            })
              .then(response => {
              console.log(response);
              let data = response.data.data;
              this.maxPage = data.all_page;//获取后台数据总页数
              if (this.pages <= this.maxPage) {
                console.log(this.pages);
                this.categoryList = this.categoryList.concat(data.list);//将获取的数据加入原先的数组
                this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
                loaded("done");//结束上拉
              } else {
                this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
                //结束刷新功能
                loaded("done");
              }
            });
          }

这就是用pull-to完成上拉加载的步骤了，希望大家开心

用vue-pull-to完成手机端的上拉加载

猜你喜欢