当前位置: 首页 > Web前端 > HTML5

关于mui页面切换下拉刷新多标签搜索问题

时间:2023-04-05 23:31:13 HTML5

这张图片是最近一个项目的页面。它使用mui结合vue。用了mui之后,感觉真??的很难用。我们不说其他的。光是这个下拉刷新就让人崩溃。问题层出不穷,但经过努力最终还是解决了。1.每次切换到新标签页时,应将下拉刷新重置为Top(){varscroll=mui('#refreshContainer').scroll();this.scroll.scrollTo(0,0,0)即。currenSize=0this.page=1mui("#refreshContainer").pullRefresh().refresh(true);},2.调用列表方法getFoucus(focus,p){this.current=focusthis.page=pif(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=>{varresult=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{varlists=result.page.listthis.projectList=this.projectList.concat(lists)}this.title=$(".mui-active").html()this.currenSize+=this.pageSize这个。total=result.page.total}else{mui.toast(result.message)}}})},3.PullRefresh(){varvm=this;mui("#refreshContainer").pullRefresh({up:{contentrefresh:"Loading...",//可选,当状态为加载时,拉起加载控件上显示的标题内容contentnomore:'没有了data',//可选,如果没有更多数据,请求完成时显示的提醒内容;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);},},})},