作用:当列表即将滚动到底部时,会触发事件并加载更多列表项,一般用于后端返回数据过多且有分页的需求。
使用方法:
<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事件里面必要的处理包含:
- 发送异步请求之时将isLoading设置为true
- 异步请求成功将数据请求回来之后,将isLoading设置为false,并且 pageNum++处理。
- 异步请求成功后,对数据的处理一般包含:请求回来的数据如果为空的话,抛出提示信息并且将finished设置为true;如果是第一页请求回来的数据需要单独判断处理(视情况而定),数据拼接时采用解构赋值的方式。例如
let dataList = (...res.data.list)。及时判断数据是否加载完毕。 - 请求异常时,可通过v-model绑定error,初始值为false,请求异常时为true,并抛出提示,用户点击提示信息,重新加载。
使用过程中常见问题: 进入页面一直发请求—— 异常没有处理好,没有及时设置finished或者error,导致一直发送请求。本人在使用过程中,有时会遗忘处理返回值为空的情况,导致页面数据为空,没有及时抛出异常,数据一直加载。