关于mui中一个页面有有多个页签进行切换的下拉刷新加搜索问题
阅读原文时间:2023年07月08日阅读:2

此图是最近做的项目中的一页,用的是mui结合vue,用了mui后,觉得是真心难用啊,先不说其他的,就光这个下拉刷新就让人奔溃了,问题层出不穷,不过最后经过努力还是摆平了哈。

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

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器