vue子组件无法正常触发上拉刷新列表的问题解决

最新推荐文章于 2023-11-29 09:49:22 发布

lyz246859

最新推荐文章于 2023-11-29 09:49:22 发布

阅读量345

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lyz246859/article/details/120764758

版权

在Vue项目中遇到子组件无法直接触发上拉加载的问题，解决方案是通过父组件监听用户操作，然后传递通知给子组件来触发加载。父组件定义onReachBottom方法并在子组件中通过watch监听cdvalue变化，以此实现数据的分页加载。当页面触底时，子组件根据接收到的父组件通知更新状态并调用获取数据的方法。

摘要由CSDN通过智能技术生成

最近在vue页面中，使用子组件的时候，需要在子组件触发上拉加载数据，但是vue子组件默认无法触发上拉和下拉钩子函数，因此解决这个问题，思路就不能放在子组件，而是应该把触发的方法写在父页面上，再通过父页面把上拉和下拉通知传给子组件：

onReachBottom(){
			console.log('触底');
			this.cdvalue=new Date().getTime();
			console.log(this.cdvalue);
		},

父页面感知了用户的操作后，把通知参数cdvalue传给子组件：

<ckdx :ggdms='ggdms' :fhck='fhck' :cdvalue='cdvalue' :type='8' v-if='type==8'></ckdx>

然后子组件开始监听触发更新：

watch: {
			cdvalue() {
					//通知触底了
					console.log(this.page,this.totalPage);
					if(this.page>= this.totalPage){
						this.status = 'noMore';
						return false;
					}else{
						this.status = 'loading';
					}
					this.page += 1;
					this.getsplist();
				
			}
		},