＜van-list＞ ＜/van-list＞列表组件的使用

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        
        <van-cell
          v-for="(item, index) in list"
          :key="index"
          is-link
         
        >
          <template #title> {{ item.customerName }} </template>
        </van-cell>
      </van-list>


//引入发请求的api函数
import { getList} from "@/api/index.js";


mounted() {
    this.loadList();
  },


data() {
    return {
      //列表
      list: [],
      // 加载状态
      loading: true,
      // 是否加载结束
      finished: false,
      // 页码值
      pageNo: 1,
      //条数
      pageSize: 10,
      // 数据总条数
      total: "",
    };
  },




methods:{
 // 获取列表
    async loadList() {
      try {
        const { data: res } = await getList({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          
        });
        console.log(res);

        //数据数组
        let rows = res.data.list;
        // 如果返回的数组是空或数组长度是0
        if (rows == null || rows.length === 0) {
          this.loading = false; // 关闭加载状态
          this.finished = true; // 加载结束
          return;
        }
        this.loading = false; // 关闭加载状态
        this.total = res.data.count;  //数据总条数
        this.list = this.list.concat(rows); //合并数组
        console.log(this.list);

        // 如果合并之后的数组长度大于返回的数据总条数
        if (this.list.length >= this.total) {
          this.finished = true; // 加载结束
        }
      } catch (err) {
        console.log("请求报错 :", err);
      }
    },

    // 上拉加载
    onLoad() {
      this.pageNo += 1;
      this.loadList();
    }

}