vant-list上拉刷新问题

vant-list页面加载数据出现的问题

问题1：页面加载完全部数据时，再次搜索调用数据接口不会再实现上拉刷新分页，只会渲染第一页内容？
问题2：将滚动条滚动到中间时，再次搜索调用接口会调用两遍接口导致页面将第一页内容渲染两遍？

vant组件库中vant-list代码片段。

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

进入页面加载数据

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 请求更新数据
      fetchData()
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        this.finished = true;
    },
    //请求数据
    fetchData() {
      Toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
      });
      return GetSteelQueryPageSteelList({
        PageInfo,
        SteelName: sessionStorage.getItem("SteelName"),
      })
        .then((res) => {
          if (res.IsSucceed) {
            this.PageInfo.TotalCount = res.Data.TotalCount;
            if (this.refreshing) {
              this.list = [];
              this.PageInfo.Page = 2;
              this.refreshing = false;
              this.list = res.Data.Data;
            } else {
              this.list = [...this.list, ...res.Data.Data];
              if (this.list.length < this.PageInfo.TotalCount) {
                this.PageInfo.Page++;
              }
            }
          } else {
            Toast.loading({
              type: "warning",
              duration: 1000,
              message: res.Message,
            });
            Toast.clear();
          }
        })
        .finally(() => {
          this.loading = false;
          if (this.list.length >= this.PageInfo.TotalCount) {
            this.finished = true;
          }
          Toast.clear();
        });
    },
  },
};

如果添加搜索功能需要更新数据时

 fetchDataConfirm() {
      if (this.steelName == "") {
        return Toast("请输入关键字");
      }
      this.list = []; //搜索后将列表置为空
      this.PageInfo.Page = 1;//搜索后请求数据从第一页开始
      this.loading = true;//重新加载页面
      this.finished = false;//加载页面完成状态置为false
      this.refreshing = false; //下拉刷新
      this.fetchData();//重新调用接口请求数据
    },

触发点击事件重新调用接口时，需要将
this.loading = true;
this.finished = false;

1. 问题1：页面加载完全部数据时，再次搜索调用数据接口不会再实现上拉刷新分页，只会渲染第一页内容？
   由于页面全部加载结束后页面中变为this.finished = true;并且一直保持加载完毕的状态上拉加载则失效，页面只会请求一次数据不分页，甚至会造成页面布局有问题所以再次请求数据时必须将```this.finished = false;``
2. 问题2：将滚动条滚动到中间时，再次搜索调用接口会调用两遍接口导致页面将第一页内容渲染两遍？
   当页面滚动条滑到中间位置时变为this.loading = false;表示数据加载完毕，如果再次搜索时需要再次调用接口，此时认为数据加载完毕会默认再次执行一遍onLoad()函数，导致接口被调用了两次，所以再刚开始重新调用接口时要this.loading = true;表示还在加载中不需要再次调用onLoad()函数了！

再书写移动端页面时一定要注意列表的上拉刷新，和下拉刷新这两个组件的使用和参数再每个函数中的变化！！！