uni-app component pull-down refresh

Posted Jun 16, 20202 min read

The title is very clear, it is the component pull-down refresh, it is impossible to directly trigger onPullDownRefresh and onReachBottom in the component, and it is necessary to pass the value through the parent and child

Parent component:

Introduce subcomponent and pass ref to the trigger function of subcomponent

import likeCategory from'./Components/likeCategory.vue'
<like-category ref="likeCategory" ></like-category>
//**The parent component is the main page and supports onPullDownRefresh and onReachBottom**

    onReachBottom() {
        this.$refs.likeCategory.getCategoryList()
     },
    onPullDownRefresh() {
        console.log("Trigger pull down refresh")
        this.$refs.likeCategory.getCategoryList()
    },

Subassembly:

Subcomponent trigger method, complete paging request by carrying specified parameters

//**Pay attention to the trigger method period, I generally use it in the created lifecycle hook**
    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:'No more! ',
                        icon:'none'
                    });
                    return;
                }
                uni.showLoading({
                    title:'Loading'
                });
                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();

                    })
                }

    },