uni-app组件下拉刷新

标题说的很清楚,是组件下拉刷新,组件里面是无法直接触发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();
                        
                    })
                }

    },