此图是最近作的项目中的一页,用的是mui结合vue,用了mui后,以为是真心难用啊,先不说其余的,就光这个下拉刷新就让人奔溃了,问题层出不穷,不过最后通过努力仍是摆平了哈。html
toTop(){ var scroll= mui('#refreshContainer').scroll(); this.scroll.scrollTo(0,0,0) that.currenSize=0 this.page=1 mui("#refreshContainer").pullRefresh().refresh(true); },
getFoucus(focus,p){ this.current=focus this.page=p if(this.page==1){ this.toTop() } this.axios.post(this.api + "/project/projectList/getMyFocusOn",$.param({"itcode":this.userMessage.entityCode,'page':this.page,"pageSize":this.pageSize})) .then(res => { var result = res.data; if (result.status == 0) { this.requesting=false; if(result.status==0){ this.requesting=false; if(this.page==1){ this.projectList=result.page.list; }else{ var lists=result.page.list this.projectList=this.projectList.concat(lists) } this.title=$(".mui-active").html() this.currenSize+=this.pageSize this.total=result.page.total } else { mui.toast(result.message) } } }) },
pullRefresh(){ var vm=this; mui("#refreshContainer").pullRefresh({ up:{ contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容 contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容; callback:function(){//必选,刷新函数,根据具体业务来编写,好比经过ajax从服务器获取新数据; setTimeout(()=>{ vm.page++ if(vm.currenSize>=vm.total){ mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); }else{ vm.getFoucus(vm.current,vm.page) } this.endPullupToRefresh(false) },300); }, }, }) },