关于mui中一个页面有有多个页签进行切换的下拉刷新加搜索问题

JessYanCoding 发布于2019-08-22 13:50 / 3258人阅读

摘要：此图是最近做的项目中的一页，用的是结合，用了后，觉得是真心难用啊，先不说其他的，就光这个下拉刷新就让人奔溃了，问题层出不穷，不过最后经过努力还是摆平了哈。每次切换到新的标签，都应该重置一下下拉刷新调用列表的方法下拉执行的方法正在加载可选，

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

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

GPU云服务器云服务器下拉刷新问题一个云服务器怎么加多个应用 java中刷新页面 java中页面刷新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92498.html

MUI使用总结

摘要：预加载自定义事件第三方扩展插件涉及的，除了，其它所有手机浏览器及浏览器均无法使用，目前主要包括语音输入事件相关注意浏览器没有事件事件相关的，手机端浏览器均可使用端模拟手机浏览器也可以正常使用。最近项目中需要使用MUI做一个视频播放的小功能。我就花时间研究了一下MUI。 MUI是一个使用JavaScript开发Android和IOS应用的前端框架。这篇文章将以知识树的形式对MUI的使用...

elliott_hu 2019-08-23 14:48 评论0 收藏0
MUI back返回父页面，同时刷新父页面

开始用mui移动端项目，最常遇到的问题就是刷新页面，最常见的一种就是下拉刷新，按照官网上的来，可以轻松解决；另外一种常见的就是从子页面回到父页面的刷新，在子页面，注册beforeback参数+自定义事件： mui.init({ beforeback: function(){ //获得列表界面的webview //var list = plus.webvie...

Travis 2019-08-21 11:42 评论0 收藏0
MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

摘要：三底部选项卡切换页面底部选项卡的切换，可以说是的标志之一。两种模式的显示效果差不多，如下图可见两种模式的区别顾名思义，模式是将所有子页面的内容，分别放置到主页不同的中，当我们点击主页的不同选项卡时，切换不同的显示。概述 JRedu 　　在上一篇博客中，我们学习了如何使用Hbuilder创建一个APP，同时如何使用MUI搭建属于自己的第一款APP，没有学习的同学可以戳链接学习： http...

番茄西红柿 2019-04-23 13:37 评论0 收藏0
记微信网页开发单页面返回不刷新的实现

摘要：使用语法与要跳转到的对应的状态信息。页面名字，方便调试。要跳转到的地址，不能跨域，对于单页应用来说没用，传空即可。需求在微信网页开发中,点击返回按钮不刷新页面,进行页面切换,且实现传值功能. 问题由来在做微信网页开发时,由于微信的左上角返回按钮会返回上一个页面并且刷新,无法做成打开页面选择内容后关闭当前页面,并且给前一个页面传值的功能. 实现方法想实现此功能一开始想到的是不进行...

cuieney 2019-08-22 15:39 评论0 收藏0