此圖是最近作的項目中的一頁,用的是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); }, }, }) },