vant List组件实现上拉加载中首次进行load事件执行两次的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vant List组件实现上拉加载中首次进行load事件执行两次的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：
进行tab切换时，其中一次tab下有上拉加载的功能

问题：
在第一次切换到带有上拉加载列表功能的tab，执行加载list的load事件执行了两次造成数据的重复加载，另外如果这个list的高度全部在可视范围内，首次就会加载两次load事件，如果可视范围只有tab切换的区域则不会出现这种情况

如图所示，tab3下的是具有上拉加载功能的list
vant List组件实现上拉加载中首次进行load事件执行两次的问题,vue学习笔记,vantui,vue.js,vant,list

解决：
方法一：分开load绑定的事件和第一次加载数据执行事件，并添加:immediate-check=“false”，禁止在初始化时立即执行滚动位置检查。
代码：
注：只添加:immediate-check="false"这个项目中不太好使，还是可能会首次执行两回。

<van-list v-if="firstTabIndex==2" v-model="loading" :finished="finished" finished-text="没有更多啦" offset="10" 
	:immediate-check="false" @load="onLoad">
	<ul class="hotel2-info-ul">
		<li class="hotel2-info-li" v-for="item in dataList" :key="`jx${item.id}`">
			<div class="area">
				<van-icon name="location" /><span class="city-name">名称</span>
			</div>
			<div class="hotel-name"><span>描述{{ item.id }}</span></div>
		</li>
	</ul>
</van-list>

js代码：

export default {
	name: "flight-pay-status",
	data() {
		return {
			dataInfo: {},//调用需要的相关数据
			dataList: [],// 数据
			firstTabIndex: 3,// 一级菜单下标
			secondTabIndex: 0,// 二级菜单下标
			secondTabList: [],// 二级菜单列表
			jxParams: {  //查询信息
				start: 0,
				limit: 10,
				cityCode: ''
			},
			loading: false,
			finished: false,
			refreshing: false,
		};
	},
	methods: {
		// 一级菜单切换
		firstTab(index){
			let initIndex = this.firstTabIndex;
			this.firstTabIndex = index;
			this.dataList = [];
			if(index==0){
				this.getFirstData();
			}else if(index==1){
				this.getSecondData();
			}else if(index==2){
				this.jxParams.start = 0;
				this.dataList = [];
				this.getLoadData();
			}else if(index==3){
				this.getFourData();
			}
		},
		// 切换获取数据
		getLoadData(){
			let para = {
				start: this.jxParams.start,
				limit: this.jxParams.limit,
				otherType: 2,
				cityCode: this.dataInfo.arrivalCityHotelCode
			}
			this.loading = true;
			myAPI.searchAround(para).then(res => {
				if(res.status){
					this.loading = false;
					let datas = res.data.hotels;
					this.dataList = datas;
					this.finished = res.data.total === this.dataList.length;
					this.jxParams.start = 1;
					this.loading = false;
					console.log(this.dataList);
				}else{
					this.tools.tip(res.data);
				}
			})
		},
		//上拉加载
		async onLoad(){
			let para = {
				start: this.jxParams.start,
				limit: this.jxParams.limit,
				otherType: 2,
				cityCode: this.dataInfo.arrivalCityHotelCode
			}
			this.loading = true;
			myAPI.searchAround(para).then(res => {
				if(res.status){
					let datas = res.data.hotels;
					this.dataList = this.dataList.concat(datas);
					if(this.dataList.length < res.data.total){
						this.jxParams.start++;
						this.loading = false;
					}else{
						this.finished = true;
						this.loading = true;
					}
				}else{
					this.tools.tip(res.data);
				}
			})
		},
	}
}

方法二：
这个也可能是样式问题造成的，绿色块儿是异步加载，里面的当图片没到onload事件时候，没渲染出来，宽高都为0。vant 的触底事件判断又在渲染之前。就会瞬间判断没填满当前空间，就会立刻又加载一次。
鉴于此，给这个绿色块儿添加最小高度。文章来源地址https://www.toymoban.com/news/detail-528344.html

到了这里，关于vant List组件实现上拉加载中首次进行load事件执行两次的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！