關於mui中一個頁面有有多個頁籤進行切換的下拉刷新加搜索問題

此圖是最近作的項目中的一頁,用的是mui結合vue,用了mui後,以爲是真心難用啊,先不說其餘的,就光這個下拉刷新就讓人奔潰了,問題層出不窮,不過最後通過努力仍是擺平了哈。
clipboard.pnghtml

1.每次切換到新的標籤,都應該重置一下下拉刷新

toTop(){
            var scroll= mui('#refreshContainer').scroll();
            this.scroll.scrollTo(0,0,0)
            that.currenSize=0
            this.page=1
            mui("#refreshContainer").pullRefresh().refresh(true);
        },

2.調用列表的方法

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)
                    }
                }
            })
        },

3.下拉執行的方法

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);
                    },
                },
            })
        },
相關文章
相關標籤/搜索