uniapp组件下拉刷新

标题说的很清楚,是组件下拉刷新,组件里面是无法直接触发onPullDownRefresh和onReachBottom,得通过父子传值的方式

父组件:

引入子组件并通过ref来传值给子组件的触发函数

import likeCategory from './Components/likeCategory.vue'<like-category ref="likeCategory"  ></like-category>//**父组件是主页面,支持onPullDownRefresh和onReachBottom**    onReachBottom() {        this.$refs.likeCategory.getCategoryList()     },    onPullDownRefresh() {        console.log("触发下拉刷新")        this.$refs.likeCategory.getCategoryList()    },

子组件:

子组件触发方法,通过携带指定参数完成分页请求

//**注意触发方法时期,我一般用在created生命周期钩子中**    created(){        this.getCategoryList()    },    getCategoryList() {        console.log(this.$props)        let params = {              shopId: this.$props.shopId1 ? this.$props.shopId1:uni.getStorageSync('ShopInfo').id,                    access_token: uni.getStorageSync('access_token'),                    pageSize:this.pageSize,                    pageNumber:this.pageNumber,                }                console.log(params.pageNumber)                if (this.total > 0 && this.total <= this.goodsInfoList.length) {                    uni.showToast({                        title: '没有更多！',                        icon: 'none'                    });                    return;                }                uni.showLoading({                    title: '加载中'                });                if (params.shopId) {                    this.$http.get(this.$api.gussYouLove, {                        data: params                    }).then(res => {                        if (res.data.code == 200) {                            if(res.data.data.list.length > 0){                                if(!!this.goodsInfoList&&this.goodsInfoList.length>0){                                    res.data.data.list.forEach(info =>{                                        this.goodsInfoList.push(info)                                    })                                                                                 }else{                                    this.goodsInfoList = res.data.data.list                                }                                                    this.total = res.data.data.total;                                this.pageNumber++                                this.isShow = false                                 console.log(this.pageNumber)                            }else{                                this.goodsInfoList = []                                 this.isShow = true                            }                                                          } else {                            uni.showToast({                                title: res.data.msg,                                duration: 2000,                                icon: 'none'                            });                        }                        uni.stopPullDownRefresh();                        uni.hideLoading();                                            })                }    },