vant-list组件瀑布流滚动加载展示数据长列表

一、介绍：

瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

二、基础用法：

List 组件通过loading和 finished两个变量控制加载状态，当组件滚动到底部时，会触发 load事件并将loading 设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将finished 设置成 true 即可。

html

<van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
      >
        <div v-for="(item, index) in list" :key="index" class="dataItem">
          <p class="title">
            {{ item.real_name ? item.real_name + "\xa0" : ""
            }}{{ item.username }}
          </p>
          <div class="num">
            <div class="register">
              <span>卡名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <p class="register_num">{{ item.name ? item.name : "暂无" }}</p>
            </div>
            <div class="register">
              <span>购买金额&nbsp;&nbsp;</span>
              <p class="recharge_num">
                {{ item.money ? item.money : "暂无" }}
              </p>
            </div>
            <div class="register">
              <span>订单状态</span>
              <p
                class="withdrawal_num"
                :class="{
                  green: item.earn_profit_type == '10',
                  yellow:
                    item.earn_profit_type == '11' ||
                    item.earn_profit_type == '12',
                  red: item.earn_profit_type === null
                }"
              >
                {{ filterStatus(item.earn_profit_type) }}
              </p>
            </div>
          </div>
        </div>
       </van-list>

js：组件引入注册再使用

<script>
import indexApi from "@/api/index.js";
import { List } from "vant";
export default {
  data() {
    return {
      buy_total_number: "",
      quit_total_number: "",
      notbuy_total_number: "",
      buy_total_money: "",
      list: [],
      loading: false,
      finished: false,
      page: 1
    };
  },
  methods: {
    getList() {
      this.loading = true;
      indexApi["XXXXXXXX"]({
        token: this.$route.query.token,
        p: this.page
      })
        .then(res => {
          console.log(res);
          this.loading = false;
          if (res.data.flag == 1) {
            console.log("请求成功");
             //先给列表上方固定的黑框那四个变量赋值
            var resData = res.data.info; //这里变量不能用res，会和接口返回的res重复
            if (this.buy_total_number == "") { //通过打印发现有报错信息buy_total_number为undfined，然后发现只有第一次请求时候才会有data数据，也就是上面四个数据，所以做一个判断，没有值的时候给四个数据赋值
              this.buy_total_number = resData.data.buy_total_number;
              this.quit_total_number = resData.data.quit_total_number;
              this.notbuy_total_number = resData.data.notbuy_total_number;
              this.buy_total_money = resData.data.buy_total_money;
            }
            if (resData.list.length > 0) {   //从这里是重点！！！
              //如果list有数据，就需要把接口返回的list数组拼接到this.list
              this.list = this.list.concat(resData.list); //追加数据,数组会越来越大
              this.page = this.page + 1; //继续加载下一页,vant组件自带的拉到底部继续请求接口
            } else {
              this.loading = false;
              this.finished = true;
            }
          } else {
            this.loading = false;
            this.$toast.fail(res.data.msg);
          }
        })
        .catch(error => {
          this.loading = false;
          console.log(error);
        });
    },
    filterStatus(val) {
      if (val == "10") {
        return "已购买";
      } else if (val == "11" || val == "12") {
        return "退货中";
      } else {
        return "未购买";
      }
    }
  },
  mounted() {},
  components: {
    VanList: List
  }
};
</script>

三、总结归纳 重点来了

1. if判断如果接口返回的list有数据，就需要把接口返回的list数组拼接到this.list，
2. 追加数据,数组会越来越大
3. this.page = this.page + 1; 继续加载下一页，vant自带的当组件滚动到底部时，会触发load事件
4. 直到接口返回的list数组为空， 把this.finished = true; 显示没有更多了
5. tab切换时候或者切换筛选条件必须要把初始化页数page，总页数totalpage；列表数据 清空= [ ]；this.loading = false；this.finished = false；重置

四、过程中遇到的问题：

vant list组件滑动时不断请求接口
一开始的时候没有加if (this.buy_total_number == ""){ }这个条件，卡在这不走了，导致page一直都是2，再就是因为我一直向下滑动触发load事件，所以接口一直在请求，请求了很多次，陷入了死循环；
后来看到了这个报错，看了下打印的数据，当page >1 的时候，没有返回这四个值所以判断，只要已经获取过了，就不再重复获取了。

五、展示长列表另一种解决办法

比方法一优势是：
这种方法先判断判断当前页数 和总页数，当前页数>=总页数时，直接 this.finished = true; 显示没有更多了，就不继续请求接口了，节省网络资源，不会跟方法一加载到最后一页有数据继续执行this.page = this.page + 1; 最后打印list是空数组， 因为一开始没加限制条件导致又去请求了一次接口。

js：

data() {
    return {
      buy_total_number: "",
      quit_total_number: "",
      notbuy_total_number: "",
      buy_total_money: "",
      list: [],
      loading: false,
      finished: false,
      page: 1,
      totalPage: 2 //加了个总页数变量，自定义个比page大的数字，否则会直接this.finished = true;
    };
  },
getList() {
  this.loading = true;
   //判断当前页数 和总页数
    if (this.page >= this.totalPage) {
       this.finished = true;
       } else {
        this.onLoad();
     }
   },
   onLoad() {
      indexApi[XXXXXXXXX"]({
        token: this.$route.query.token,
        p: this.page
      })
        .then(res => {
          console.log(res);
          if (res.data.flag == 1) {
            console.log("请求成功");
            // 加载状态结束
            this.loading = false;
            var resData = res.data.info;
            // 当page >1 的时候，没有返回这四个值
            //所以判断，只要已经获取过了，就不再重复获取了
            if (this.buy_total_number == "") {
              this.buy_total_number = resData.data.buy_total_number;
              this.quit_total_number = resData.data.quit_total_number;
              this.notbuy_total_number = resData.data.notbuy_total_number;
              this.buy_total_money = resData.data.buy_total_money;
            }
            this.totalPage = resData.totalPages;
            if (resData.list.length > 0) {
              this.list = this.list.concat(resData.list); //追加数据
              console.log("增加page前");
              console.log(this.page);
              this.page = this.page + 1;
              console.log("增加page后");
              console.log(this.page);
            } else {
              this.finished = true;
            }
          } else {
            this.$toast.fail(res.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

五、看文档防踩坑

再记录下vant list组件使用中官方文档给的常见问题，防止踩坑，以备不时之需哈哈哈哈~

六、资料

vue -vantUI tab切换时 list组件不触发load事件解决办法