zoukankan      html  css  js  c++  java
  • 关于mui中一个页面有有多个页签进行切换的下拉刷新加搜索问题

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

    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);
                        },
                    },
                })
            },
  • 相关阅读:
    angular5 二维码插件
    ag-grid 设置默认选中多行
    断点续传和下载原理分析
    Volley 实现原理图
    Volley全方位解析,带你从源码的角度彻底理解
    23种设计模式
    android service
    Android drawable微技巧
    Android ListView实现不同item的方法和原理分析
    Android 网络框架 volley源码剖析
  • 原文地址:https://www.cnblogs.com/10manongit/p/12831880.html
Copyright © 2011-2022 走看看