共计 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();})
}
},
正文完