使用 vant-ui vant-list 一些感悟 ！

这里面还是有很多坑的，作为过来人把一些使用经验告诉给新手玩家。我这里只说我经常用的属性。

v-model:loading | 是否处于加载状态，加载过程中不触发 load 事件 | boolean | false |

1.上来不用在onMounted和onCreated调用获取列表的方法。他会自己执行，大可放心。（这里面有大坑。。。。）；

finished | 是否已加载完成，加载完成后不再触发 load 事件 | boolean | false |

1.这个一般是列表接口返回空数组或者在接口里加一个字段告诉前端不需要加载下一页，把它设置为true，要么它会处在一直加载的状态。

我这采用的是vue3的写法，我这是和后台商量的他返回字段告诉我没有下一页。还有一些属性方法其实使用起来比较简单我就不说了。

      <van-list
        v-model:loading="loading"
        :immediate-check="false"
        :finished="finished"
        :offset="100"
        loading-text="加载中..."
        finished-text="没有更多了"
        error-text="加载失败，请重新刷新"
        @load="getList"
      >
        <item-list :data="listData"></item-list>
      </van-list>
      const getList = async () => {
      const { code, data, msg } = await getItemList({
        pageNum: state.pageNum,
        pageSize: 10,
        dividendProduct: "",
        ...store.state.selectedJson,
      });

      if (code == "000000") {
        state.pageNum += 1;
        state.loading = false;
        state.listData = [...state.listData, ...data.pageData];
        if (!data.hasNextPage) {
          state.finished = true;
        }
      } else {
        Toast.fail(msg);
      }
    };

下面我来说这个大坑：

我的需求是多个tab来切换加载van-list，就会触发两次请求。我在网上找了好多解决思路，感觉很多都是不对的，很复杂。试了好多种，都不行。我不知道哪些人发哪些文章是为啥，不是误导玩家吗？其实真的不难，在你切好tab的时候，初始化你的字段就可以了，手动调一下获取列表。真的没有那么麻烦。这里强调一下 :immediate-check="false" 的意思是初始化不执行接口，这个一定不要忘了。

      state.pageNum = 1;
      state.listData = [];
      state.loading = true;
      state.finished = false;
      getList();