uniAPP混合开发小程序实现子组件下拉刷新

在上一篇文章中，我们通过自定义实现底部tab，但是在使用uniAPP下拉刷新时，父组件可以实现，子组件没有效果，这也着实让我难为了半天，最终通过父子组件互相传值的方式来实现了想要的效果

那么我是怎么做呢？

首先，我们在父组件下拉刷新的函数中获取当前tab的index从而告知哪个页面执行刷新重新获取数据（我们这里以一个弹窗替代），并且当子组件获取完数据之后再向父组件回传一个值以达到初始化的效果。以下是实现的效果：

好了上一部分关键代码

父组件页面部分

<view class="tabCon">
			<Home v-if='index === 0' :isRefresh='isRefresh' @cref="listenRef"></Home>
			<Discover v-if='index === 1' :isRefresh='isRefresh' @cref="listenRef"></Discover>
			<Message v-if='index === 3' :isRefresh='isRefresh' @cref="listenRef"></Message>
			<Mine v-if='index === 4' :isRefresh='isRefresh' @cref="listenRef"></Mine>
		</view>
父组件下拉刷新
	onPullDownRefresh() {
			this.isRefresh = this.index
			setTimeout(function () {
				uni.stopPullDownRefresh()
			}, 1000);
		},
  父组件函数部分（获取子组件传递的值初始化isRefresh
  		listenRef(data){
				console.log(data)
				this.isRefresh = data
			}

子组件部分

各个子组件同理
        props:{
	   		isRefresh:{
				type : Number,
				default:9
			}
		},
        watch:{
			isRefresh:{
				deep:true,
				handler(newValue,oldValue){
					if(newValue === 0){
						uni.showToast({
							title: '首页刷新'
						});
						this.$emit("cref",9)
					}
				}
			}
		},