先说办法(比较直接比较笨的): 不把van-pull-refresh以及van-list放在van-tab标签当中
其原因可能是在tab
里定位 触底判断有问题
网上搜了好多,很多说是overflow
的问题,但我改了没什么用 就直接不放在tab
里 只用他判断切换数据
示例代码
<van-tabs v-model="active" color="#228BFF" animated sticky swipeable @change="tabChange">
<van-tab :title="item.title" :name="item.name" v-for='(item,index) in TabConfiguration' :key='index'></van-tab>
</van-tabs>
<div>
<van-pull-refresh success-text="刷新成功" v-model="refreshing" @refresh="onRefresh">
<van-list v-model="IsRequest" :finished="finished" :immediate-check="false" @load="listLoad" :finished-text="finishedText">
<template v-for="(trialItem,index) in TabConfiguration[nowClickTab].listData">
<div style="height: 100px">{{trialItem}}</div>
</template>
</van-list>
</van-pull-refresh>
</div>
export default {
props: {},
name: "test",
//变量书写对象
data() {
return {
finishedText:'暂无数据',
// 下拉状态
refreshing: false,
// tab配置
TabConfiguration: [
{
name: '1',
title: '标题1',
listData: [],
},
{
name: '2',
title: '标题2',
listData: [],
},
{
name: '3',
title: '标题3',
listData: [],
},
{
name: '4',
title: '标题4',
listData: [],
},
],
// 当前展示那个Tab页面
active: 0,
// 请求数据显示字段
loadingText: '加载中...',
// 是否请求中
IsRequest: false,
filterId: "",
// 分页配置
pagingConfig: {
// 每页大小
pageSize: 20,
// 页码
pageNumber: 1,
// 总条数
total: 0,
},
// 是否所有的数据都已经加载完毕
finished: false,
nowClickTab: 0,
};
},
mounted() {
this.Init();
},
//书写方法对象
methods: {
// 下拉刷新
onRefresh() {
this.pagingConfig.pageNumber = 1;
this.finished = false;
this.tabChange(this.filterId);
this.refreshing = false
},
/**
* @desc 初始化函数
*/
async Init() {
this.tabChange();
},
// 改变标签
newTabChange(filter){
this.TabConfiguration.forEach((item ,index) => {
if(item.name == filter){
this.nowClickTab = index
}
})
this.tabChange(filter)
},
async tabChange(filter = 1, autoObj = {}) {
if ((this.filterId != filter)) {
// 重置页码值
this.pagingConfig.pageNumber = 1;
// 重置总数俱的开关
this.finished = false;
}
this.filterId = filter;
// 把状态更新成请求中
this.IsRequest = true;
// 首先获取要设置数据的对象
let SetDataObj = this.TabConfiguration.find((item) => { return item.name == this.filterId });
// 根据页码值来判断当前是否需要重置数据集合
if (this.pagingConfig.pageNumber == 1) {
// 处理完数据存放的对象;
SetDataObj.listData = [];
}
// 根据参数获取数据列表
setTimeout(() => {
for (let i = 0; i < 10; i++) {
SetDataObj.listData.push(i);
}
// 加载状态结束
this.IsRequest = false;
// 数据全部加载完成
if (this.list.length >= 40) {
this.finished = true;
}
}, 1000);
},
// 上拉刷新触发函数
async listLoad() {
// 如果当前不存在 tab的标识就直接返回出去
if (!this.filterId) return;
// return;
// 页码值+1
this.pagingConfig.pageNumber++;
// 开始请求数据
await this.tabChange(this.filterId);
}
},
};