vue 移动端实现上拉加载更多

• 根据项目需求实现上拉加载更多～我用的是 vue-infinite-loading 插件实现的。下面是安装流程和使用方法：有需要直接拿去用
• 第一步：安装

npm install vue-infinite-loading --save

 

• 第二步：在需要上拉加载的单页面引入

import InfiniteLoading from "vue-infinite-loading"; //引入加载更多组件

• 第三步：在 components 中 声明组件

components: {
    InfiniteLoading
  }

• 第四步：在data里定义 页码 和 每页请求的数据个数 以及 列表数组

 data() {
    return {
      page: "1",
      size: "10",
      list: []
    };

 

• 第五步：在methods中写上请求数据的方法 

  methods: {
    getList($state) {
      let params = new URLSearchParams();
      params.append("page", this.page);
      params.append("size", this.size);
      this.$post(httpApi.USERLIST, params)
        .then(res => {
          if (res.code == 10000) {
            if (res.data) {
              this.list = this.list.concat(res.data.list);
              this.page++;
              if (res.data.agentareausers.length === 10) {
                $state.loaded();
              } else {
                $state.complete();
              }
            } else {
              $state.complete();
            }
          } else {
            $state.complete();
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },

• 第六步：在页面添加组件然后调用请求数据的方法

  // 这里的 @infinite="getList"  这个getList是请求数据的方法，你可以换成你自己的即可
   
        没有更多了～
        没有更多了～
   

• 好啦。按照以上的步骤去操作，完成后赶快测试下吧，我项目中都是用的这个组件来实现上拉加载更多的。需要的朋友们直接拷贝粘贴拿去用吧。喜欢博主的关注哦，后续还会更新更多知识点和问题。相互学习