uniapp组件下拉刷新

36次阅读

共计 1437 个字符,预计需要花费 4 分钟才能阅读完成。

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

    },

正文完
 0