Vant实现分页功能

使用Vant实现分页功能，页面结构代码示例如下：

<van-field
  v-model="searchWord"
  center
  clearable
  label="查询"
  placeholder="请输入查询内容"
>
  <template #button>
    <van-button size="small" type="primary" @click="search"
      >查询</van-button
    >
  </template>
</van-field>
<van-list
  class="msgPage"
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="getCustomerAnalyst"
>
  <van-cell
    v-for="item in msgList"
    :key="item.id"
    @click="goMsgDetail(item)"
  >
    <template #default>
      <div class="blueBar"></div>
      <span class="tel">{{ item.customerPhone }}</span>
      <span>{{ item.customerName }} {{ item.influenceType }}</span>
      <div>
        <div>{{ item.companyName }}</div>
      </div>
    </template>
  </van-cell>
  <div v-show="!loading">
    <NoData :list="msgList" />
  </div>
</van-list>

js代码如下：

const searchWord = ref("");

const pageSize = ref(100);
const pageNum = ref(1);
const msgList = ref([]);
const loading = ref(true);
const finished = ref(false);

const getCustomerAnalyst = () => {
  H5Api.getCustomerAnalyst(
    {},
    pageSize.value,
    pageNum.value,
    searchWord.value
  ).then((res) => {
    let newRecords = {};
    if (res.data.code == 200) {
      pageNum.value++;
      newRecords = res.data.data || [];
      msgList.value = msgList.value.concat(newRecords.list);
      loading.value = false;
      if (pageNum.value > newRecords.pages) {
        finished.value = true;
      }
    } else {
      Toast.fail(res.data.message);
    }
  });
};

const search = () => {
  pageNum.value = 1;
  msgList.value = [];
  getCustomerAnalyst();
};