思路
页面结构
van-tabs在最上面
van-pull-refresh在van-tabs下面
van-list在van-pull-refresh里面
css关键
给van-pull-refresh设置高度为calc(100% - 44px), 其中44px是van-tabs的高度,
同时给van-pull-refresh设置
overflow: hidden;
overflow-y: scroll;
这样就能滚动起来加载更多
效果展示
以下是正文
html
<div class="AlarmList">
<van-tabs v-model="active" color="RGBA(4, 131, 247, 1)" title-active-color="#000"
@change="onRefresh">
<van-tab v-for="(item,index) in tabList" :key="index" :title="item.title" :name="item.name">
</van-tab>
</van-tabs>
<van-pull-refresh :style="{height:'calc(100% - 44px)'}" v-model="isRefresh"
@refresh="onRefresh" ref="pullRefresh" immediate-check="false">
<van-empty v-if="dataList.length == 0" description="暂无数据" />
<van-list ref="list" class="list" v-model="loadingMore" :finished="finished" finished-text="没有更多了"
@load="onLoadMore">
<div class="list_item" v-for="(item,index) in dataList" :key="index">
div{{index}}
</div>
</van-list>
</van-pull-refresh>
</div>
data定义
tabList: [
{
title: "全部",
name: "1"
},
{
title: "人工",
name: '2'
},
{
title: "系统",
name: '3'
},
],
active: '1',
total: 0,
pageNum: 1,
pageSize: 10,
//上拉加载下拉刷新
loadingMore: true, //加载更多是否显示加载中
finished: false, //加载是否已经没有更多数据
isRefresh: false, //是否下拉刷新
dataList: [],
js
//加载页面
initPage() {
this.getList();
},
//刷新
onRefresh() {
this.dataList = [];
this.loadingMore = true;
this.finished = false;
this.isRefresh = false;
this.pageNum = 1;
this.getList();
},
//加载更多
onLoadMore() {
this.pageNum++;
setTimeout(() => {
this.getList();
}, 200);
},
// 获取列表
getList() {
setTimeout(() => {
let list = []
for (let index = 0; index < 5; index++) {
let obj = { name:"测试",id:index}
list.push(obj)
}
// 加载状态结束
this.loadingMore = false;
this.isRefresh = false;
if (this.dataList.length > 10) {
//没有更多了
this.finished = true;
}
//数据追加到列表
this.dataList = this.dataList.concat(list);
}, 1000);
},
css
.AlarmList{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
/deep/ .van-tabs {
// height: 100%;
.van-tabs__content {
height: calc(100% - 44px);
}
.van-tab__pane {
height: 100%;
}
}
.van-pull-refresh {
overflow: hidden;
overflow-y: scroll;
.list_item {
width: calc(100% - 0.6rem);
display: flex;
align-items: center;
margin: 0.3rem;
box-sizing: border-box;
background-color: #fff;
border-radius: 4px;
flex-direction: column;
height: 4rem;
}
}
}
原文链接:https://blog.csdn.net/weixin_45753961/article/details/125197047
项目场景:
提示:下拉刷新和上拉加载更多同时使用
问题描述
提示:下拉刷新的时候出现两个加载中进度条
原因分析:
提示:下拉刷新的时候触发了上拉加载,所以执行了一次下拉刷新和一次上拉加载更多
解决方案:
提示:下拉刷新时将finished 设置为true,获取数据后判断数据长度,再对finished 进行赋值
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
async getList() {
this.loading = true
const param = {
...this.queryList,
...this.searchParams
}
const result = await getProductOrderList(param)
this.isLoading = false
this.loading = false
this.refreshing = false
const { code, data = {}, message } = result.data || {}
if (code === '200') {
if (this.queryList.current > 1) {
this.worlOrderList = this.worlOrderList.concat(data.records)
} else {
this.worlOrderList = data.records
}
this.total = data.total
if (this.total <= this.worlOrderList.length) {
this.finished = true
}else{
this.finished = false
}
} else {
Toast.fail(message || '系统繁忙')
}
},
// 下拉刷新
onRefresh() {
// 清空列表数据
this.finished = true
this.worlOrderList = []
this.queryList.current = 1
this.getList()
},
// 加载更多
onLoad() {
this.queryList.current += 1
this.getList()
},
原文:van-pull-refresh与van-list同时使用触发两次下拉,出现两个加载中进度条_van-pull-refresh van-list_Julia_0502的博客-CSDN博客