MUI back返回父页面，同时刷新父页面

Travis 发布于2019-08-21 11:42 / 1733人阅读

开始用mui移动端项目，最常遇到的问题就是刷新页面，最常见的一种就是下拉刷新，按照官网上的来，可以轻松解决；另外一种常见的就是从子页面回到父页面的刷新，
在子页面，注册beforeback参数+自定义事件：

mui.init({
    beforeback: function(){
        //获得列表界面的webview
         //var list = plus.webview.currentWebview().opener();
         //目标页面
         var list = plus.webview.getWebviewById("FollowUpHisList");  
         //触发列表界面的自定义事件（refresh）,从而进行数据刷新  
         mui.fire(list, "refresh");  
        //返回true，继续页面关闭逻辑
        return true;
    }
});

beforeback的执行返回必须是同步的，当然也可以自定义业务逻辑，复写mui.back

var old_back = mui.back;
mui.back = function(){
  var btn = ["确定","取消"];
  mui.confirm("确认关闭当前窗口？","Hello MUI",btn,function(e){
    if(e.index==0){
        //执行mui封装好的窗口关闭逻辑；
        old_back();
    }
  });
}

而父页面，则需要添加监听事件，通过reload刷新整个页面：

window.addEventListener("refresh", function(e) {
//在父页面中添加监听事件，刷新页面
    location.reload();  
});

在实际应用中，如果父页面只是单纯的列表页，那么reload()刷新也是可以的，但如果页面中有其他的请求，这时候reload()刷新整个页面就显得有些多余，这个时候为何不单单只刷新指定的方法呢？

window.addEventListener("refresh", function(e) {  
    document.getElementById("infoList0").innerHTML = "";
    //清空列表内容
    initCloumnData();//重新加载要刷新的方法
});

当然，这种在子页面添加自定义事件，父页面添加监听的方法也可以用于方法请求成功后，自动跳转到目标页面并刷新，在实际中也是很实用的，尤其是添加，编辑信息成功后，自动返回并刷新页面。
高手请多指点，新手可以借鉴。

GPU云服务器云服务器 html返回父级页面父页面 html退回父页面 iframe调用父页面js

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

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

MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

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

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

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

cuieney 2019-08-22 15:39 评论0 收藏0
MUI使用总结

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

elliott_hu 2019-08-23 14:48 评论0 收藏0
VUE实例图解

摘要：案例品牌列表构建基本结构利用的样式数据要双向更新，所以要用到，同时在后面的中要进行初始化为添加按钮绑定事件的中，绑定值为关键字删除标签绑定函数，传入参数的时候，需要用括号事件修饰符，表示阻止默认事件实例对象新建一个实例函数中初始化需要双向 VUE案例品牌列表构建基本结构利用bootstrap的样式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 评论0 收藏0
mui实现底部凸起按钮的实现

摘要：最近在看其他的时候，突然想到了在中自己实现一个底部凸起按钮的效果。来实现底部切换始终处于上层的效果。最后附上本人的圆形按钮代码和实现效果图。最近在看其他app的时候，突然想到了在mui中自己实现一个底部凸起按钮的效果。大致想要实现的样子如图（来自闲鱼app的主界面）：showImg(https://segmentfault.com/img/bVHqdd?w=276&h=122); 话...

DevTalking 2019-08-21 11:24 评论0 收藏0