当前位置: 首页 > Web前端 > vue.js

uni-app组件下拉刷新

时间:2023-04-01 12:19:21 vue.js

题目说的很清楚了,就是组件的下拉刷新,组件中的onPullDownRefresh和onReachBottom不能直接触发,父组件必须通过父子传值:导入子组件并传值通过refimportlikeCategoryfrom'./Components/likeCategory.vue'//**父组件为主页面,支持onPullDownRefresh和onReachBottom**onReachBottom(){this.$refs.likeCategory.getCategoryList()},onPullDownRefresh(){console.log("触发下拉刷新")this.$refs.likeCategory.getCategoryList()},subcomponent:子组件触发方法,通过携带指定参数完成分页请求//**注意触发方法期间,我一般在created生命周期钩子中使用**created(){this.getCategoryList()},getCategoryList(){console.log(this.$props)让参数={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(参数.pageNumber)if(this.total>0&&this.total<=this.goodsInfoList.length){uni.showToast({title:'没有更多!',icon:'none'});返回;}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=falseconsole.log(this.pageNumber)}else{this.goodsInfoList=[]this.isShow=true}}else{uni.showToast({title:res.data.msg,duration:2000,图标:'无'});}uni.stopPullDownRefresh();uni.hideLoadi的();})}},