vue3移动端使用vant list实现列表数据渲染，@load一直请求接口的问题

需求：点击查询按钮请求接口，获取数据

问题描述：接口数据返回20条，我应该在点击查询后请求一次接口，到滑动到底部时请求接口加载剩下的10条，但是现在是直接请求了两次接口直接把所有数据都加载完了

解决方法：List 会监听浏览器的滚动事件并计算列表的位置， 由于我的listBox设置了overflow-y: scroll,导致 List 无法正确地判断滚动容器,所以删除就好了

布局部分：

<van-search
    v-model="searchValue"
    show-action
    placeholder="请输入查询条件"
    @search="onSearch"
    @blur="blurTrim"
  >
    <template #action>
      <div
        @click="onSearch"
        :style="{
          'font-size': '0.24rem',
          background: themeColor,
          padding: '0 0.16rem',
          color: '#fff',
        }"
      >
        查询
      </div>
    </template>
 </van-search>
  
 <div class="emptyBox" v-if="list?.length == 0">暂无数据</div>
 <div class="listBox" v-else>
     <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
        :style="{
          paddingBottom: pageDescPosition == 'top' ? '1.15rem' : '',
        }"
     >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getInvoiceRecordList"
      >
        <div class="itemBox" v-for="(item, index) in list" :key="index">
          <div class="time">
            <span>开票时间</span>
            <span>{{ item.createAt }}</span>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
</div>

js接口请求部分：

const onSearch = () => {
  // 获取列表数据
  finished.value = false;
  loading.value = true;
  list.value = [];
  page.value = 1;
  total.value = 0;
  getInvoiceRecordList();
};
// 下拉刷新操作
const onRefresh = () => {
  finished.value = false;
  loading.value = true;
  list.value = [];
  page.value = 1;
  total.value = 0;
  getInvoiceRecordList();
};
const getInvoiceRecordList = () => {
  invoiceRecordList({
    customerId: encryption.customerId,
    userId: encryption.userId,
    mobile: searchCondition.value === "mobile" ? searchValue.value : undefined,
    email: searchCondition.value === "email" ? searchValue.value : undefined,
    page: page.value,
    pageSize: pageSize.value,
  }).then((res: any) => {
    console.log("res", res);
    // 只有监听到了下拉刷新的动作refreshing才为true
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }
    loading.value = false;

    if (res.items.length && list.value.length <= res.totalNum) {
      list.value = list.value.concat(res.items);
      page.value++;
    }
    if (list.value.length >= res.totalNum) {
      finished.value = true;
    }
    total.value = res.totalNum;
  });
};

css部分：

.listBox {
    height: 100%;
    padding: 0 0.32rem;
    box-sizing: border-box;
    //overflow-y: scroll;//罪魁祸首
    .itemBox {
      background: #f2f2f2;
      margin-top: 0.24rem;
      padding: 0.24rem 0.32rem;
      box-sizing: border-box;
      color: #333;
      font-size: 0.28rem;
      border-radius: 2px;
      > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.16rem;
        > :first-child {
          flex: 1;
        }
      }
    }
  }