这几天在做移动端的东西，然后就遇上了个问题。

vant这个框架我不是很熟悉，所以在开始用的时候没有注意它的问题。

结果昨天写一个根据不同状态查询列表的组件，出现了加载两次相同数据的bug。

不过也是前端请求的问题我就没找后台的麻烦（毕竟自己拉的屎，屁股自己擦）

van-list这个组件的onload函数是根据dom和可视区底部的距离来触发的，

immediate-check这个属性是在组件初始化的时候进行检查距离，但这个不是问题所在。

我切换tab的时候如果list被拉到了底部，那么它在进入下一个tab的同时，会进行两次相同的请求。

讲道理我开始真的很纳闷，我以为tab切换会把dom也给换掉，但我看了下F12，

list不是嵌套在tab里面的，也就是说切换tab只是改变了数据，并没有切换list这个dom。

也就是说在这个时候dom和可视区底部的距离突然变成了可触发的状态，

但因为请求是异步的，所以在数据没有渲染之前又触发了一次。

于是我还是仔细看了下list这个组件触发onload的方式。

发现它v-model绑定的是否加载的状态其实是可以阻挡onload的触发的。

然后我就在切换tab的触发函数里先把list的v-model绑定的loading给设置成true（list会在onload之前自动把loading改为true）

这个时候就没有同时请求两次的bug了。

（其实说了这么多我还是没搞懂van-list的细节，还是技术太菜了，表达能力低等。）

下面放出我的代码供有需要的兄弟参考。（欢迎补充和指导。）

<template>
	<div class="myOrder">
		<van-tabs v-model="tabAlive" @click="tabClick" sticky>
			<van-tab v-for="tab in tabList" :key="tab.id" :title="tab.text">
				<van-list 
				    v-model="loading" 
				    offset="20" 
				    :finished="finished" 
				    finished-text="没有更多了..." 
				    @load="onLoad">
					<div class="order" v-for="(item, index) in tableData" :title="item">
					    {{ index }}
					</div>
				</van-list>
			</van-tab>
		</van-tabs>
	</div>
</template>
<script>
import ApiCourseOrder from '@/api/courseOrder.js';
export default {
	data() {
		return {
			tabAlive: 0,
			tabList: [
				{ id: 0, text: '全部', payStatus: undefined },
				{ id: 1, text: '待付款', payStatus: 0 },
				{ id: 2, text: '待收货', payStatus: 1 },
				{ id: 3, text: '已完成', payStatus: 2 },
				{ id: 4, text: '已取消', payStatus: -1 }
			],
			loading: false,
			finished: false,
			tableData: [],
			total: 0,
			tableQueryOption: {
				pageNo: 1,
				pageSize: 5,
				payStatus: undefined
			}
		};
	},
	created() {
		if (this.$route.params.payStatus) {
			for (let i in this.tabList) {
				if (this.$route.params.payStatus == this.tabList[i].payStatus) {
				    //进入页面时初始化请求类型
					this.tabAlive = Number(i)
					this.tableQueryOption.payStatus = this.$route.params.payStatus;
				}
			}
		}
	},
	methods: {
		async onLoad() {
			// this.loading = true
			let data = await this.getCourseOrder();
			this.tableData.push(...data);
			if (!!!data||data.length < this.tableQueryOption.pageSize) {
				this.finished = true;
				return ;
			}
			return;
			console.log(data);
		},
		async tabClick(index, title) {
			this.loading = true;//如果滚动条到达底部，切换tab时会提交两次请求。所以先设置成true表示正在加载。
			this.finished = false;
			// 初始化请求状态
			this.tableQueryOption.payStatus = this.tabList[index].payStatus;
			this.tableQueryOption.pageNo = 1;
			this.tableData = [];
			//准备完成后触发onload函数
			this.onLoad()
		},
		async getCourseOrder() {
		        //获取数据的函数
			let params = {
				...this.tableQueryOption
			};
			console.log(params);
			let { data, total } = await ApiCourseOrder.getCourseOrderList(params);
			this.total = total;
			this.loading = false;
			this.tableQueryOption.pageNo += 1;
			return data;
		}
	}
};
</script>