vant中list列表组件使用

html部分

       <van-list
          v-model="loading"
          :finished="finished"
          @load="queryBusiIndepBo"
        >
          <li v-for="(item,index) in coopList" :key="index">
            <div class="mcName">{{ item.KHMC }}</div>
            <div class="custMsg">
              <div class="title">部门</div>
              <div class="dep">{{ item.ORG_NAME || "--" }}</div>
            </div>
          </li>
        </van-list>

js ：

data声明

data() {
    return {
      pageSize: 10,
      pageNum: 0,
      finished: false,
      loading: false,
      coopList: []
    };
  },

methods：中定义的方法

 // 注意: 这个 queryBusiIndepBo方法是请求后端接口获取数据的方法
    queryBusiIndepBo() {
      myCustApi.queryBusiIndepBo(
        {
          start: this.pageNum,
          limit: this.pageSize
        }
      ).then(res => {
        if (res?.data) {
          const dataList = res.data;
          dataList.map((item) => {
            this.coopList.push(item);
          });

          this.loading = false;
          const len = this.coopList.length;
          if (len < this.pageSize) {
            this.finished = true;
          } else {
            this.pageNum = this.pageNum + 1;
          }
        } else {
          this.loading = false;  // 结束加载状态
          this.finished = true;  // 加载状态结束 
        }
      });
    },

loading 和 finished 分别是什么含义？

List有以下三种状态，理解这些状态有助于你正确地使用List组件：
1、非加载中，loading为false，此时会根据列表滚动位置判断是否触发load事件（列表内容不足一屏幕时，会直接触发）
2、加载中，loading为true，表示正在发送异步请求，此时不会触发load事件
3、加载完成，finished为true，此时不会触发load事件
在每次请求完毕后，需要手动将loading设置为false，表示加载结束

注意点：不在在它的父元素去设置overflow