vant-ui中List 组件可以与 PullRefresh 组件结合使用,实现下拉刷新的效果
一、直接上代码
javascript
sensitiveRefresh: false,
sensitiveLoading: false,
sensitiveFinished: false,
sensitiveDataCount: 0,
sensitiveList: [],
sensitivePageNumber: 1,
<van-pull-refresh v-model="sensitiveRefresh" @refresh="sensitiveRefreshLoadTop">
<!-- 操作完成后将 v-model 设置为 false,表示加载完成 -->
<van-list
v-model="sensitiveLoading"
:finished="sensitiveFinished"
:finished-text="sensitiveDataCount > 0 ? '-没有更多了-' : ''"
@load="sensitiveLoadMoreList"
>
<!-- 当组件滚动到底部时,会触发 load 事件并将 loading 设置成 true -->
<!-- 若数据已全部加载完毕,则直接将 finished 设置成 true 即可。 -->
<div class="spInfo-cell" v-for="(item, index) in this.sensitiveList" :key="index">
<div class="spInfo-cell-content">
<div class="text" style="width: 45px">{{ item.spCode }}</div>
<div class="text" style="width: 100px">
{{ item.content }}
<br />
{{ item.stockName }}
</div>
<div class="text" style="width: 120px">
{{ item.operatorName }}
<br />
{{ item.createTime }}
</div>
<div @click="clickDeleteSensitive(item)" class="sensitive-btn">
<div class="text">删除</div>
</div>
</div>
<div class="line"></div>
</div>
<van-empty v-if="sensitiveDataCount == 0" description="暂无数据" />
</van-list>
</van-pull-refresh>
//不生效列表刷新
sensitiveRefreshLoadTop() {
this.sensitiveFinished = false;
// 将 loading 设置为 true,表示处于加载状态
this.sensitiveLoading = true;
this.sensitiveLoadMoreList();
},
//不生效列表上拉加载更多
sensitiveLoadMoreList() {
if (this.sensitiveRefresh) {
this.sensitivePageNumber = 1;
this.sensitiveList = [];
this.sensitiveRefresh = false;
}
this.getSensitiveList();
},
// 不生效接口列表
getSensitiveList() {
spRemoveSensitiveWordList({
spCode: this.search.spCode,
pageNumber: this.sensitivePageNumber,
pageSize: 10,
}).then(res => {
this.sensitiveLoading = false;
this.sensitiveFinished = false;
this.sensitiveList.push(...(res.data || []));
this.sensitiveDataCount = res.dataCount;
this.sensitivePageNumber++;
if (this.sensitiveList.length >= this.sensitiveDataCount) {
this.sensitiveFinished = true;
}
});
() => {
this.sensitiveLoading = false;
};
},