vant组件_List

262 阅读1分钟

作用:当列表即将滚动到底部时,会触发事件并加载更多列表项,一般用于后端返回数据过多且有分页的需求。

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

两个变量 isLoading,finished来控制页面的加载

const loading = ref(false); const finished = ref(false);

isLoading 当页面滚动到底部时,会触发onLoad事件,并需要将isLoading 设置为true 此时进行数据的异步请求,当请求数据成功,则将isLoading设置为false,若数据全部加载完毕,则将finished设置为true即可

onLoad事件里面必要的处理包含:

  1. 发送异步请求之时将isLoading设置为true
  2. 异步请求成功将数据请求回来之后,将isLoading设置为false,并且 pageNum++处理。
  3. 异步请求成功后,对数据的处理一般包含:请求回来的数据如果为空的话,抛出提示信息并且将finished设置为true;如果是第一页请求回来的数据需要单独判断处理(视情况而定),数据拼接时采用解构赋值的方式。例如let dataList = (...res.data.list)。及时判断数据是否加载完毕。
  4. 请求异常时,可通过v-model绑定error,初始值为false,请求异常时为true,并抛出提示,用户点击提示信息,重新加载。

使用过程中常见问题: 进入页面一直发请求—— 异常没有处理好,没有及时设置finished或者error,导致一直发送请求。本人在使用过程中,有时会遗忘处理返回值为空的情况,导致页面数据为空,没有及时抛出异常,数据一直加载。