这次分享的是我这次的项目中的一个功能：Vue＋Vant组件库完成列表的加载和下拉刷新，废话不多说直接上代码：
HTML：
<van-empty description="暂无数据"
v-show="recordList.length == 0" />
<van-pull-refresh v-model="isRefreshing"
@refresh="onRefresh">
<van-list v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="getAllDangers">
<div class="record"
v-for="item in recordList"
:key="item"
:title="item"
@click="toDetails(item)">
<div class="record_title">
<span class="tag"
:style="{ backgroundColor: recordColor[item.srvState] }">
{{ recordStatus[item.srvState] }}
</span>
<span class="dtfilltime">{{ item.srvCreateTime }}</span>
</div>
<div class="record_content">
<div class="desc_name">
<span class="desc_prop">调阅人：</span>
<span class="desc">{{ item.srvCreateName }}</span>
</div>
<div class="desc_name">
<span class="desc_prop">关键字：</span>
<span class="desc">{{ item.srvKey }}</span>
</div>
<div class="desc_name"
v-if="(item.srvState==3)">
<span class="desc_prop">驳回意见：</span>
<span class="desc">{{ item.strProcessSuggest }}</span>
</div>
</div>
</div>
</van-list>
</van-pull-refresh>
js:
// 分页查询信息记录列表
const getAllDangers = () => {
getRecords({
pageBaseNum: pageBaseNum.value,
pageBaseSize: pageBaseSize.value,
}).then((res) => {
if (res.code == 200) {
total.value = res.data.total
if (recordList.value.length < total.value) {
res.data.pageData.forEach((item) => {
recordList.value.push(item)
})
pageBaseNum.value++
}
if (recordList.value.length >= total.value) {
finished.value = true
}
loading.value = false
} else {
toast(res.msg)
}
})
}
效果图：(数据没这么多，但功能是可以用的)
