MUI返回父页面刷新功能实现

Love The Way You Lie 2021-07-24 11:33 491阅读 0赞

# 一 头文件引用 #

<script type="text/javascript" src="js/mui.js"></script>

# 二 子页面代码 #

定义 beforeback，放到<head>中

<script type="text/javascript" charset="utf-8">
        mui.init(
            {
                beforeback: function () {
                    // 获得父页面的webview
                    var list = plus.webview.currentWebview().opener();
                    // 触发父页面的自定义事件(refresh),从而进行刷新
                    mui.fire(list, 'refresh', null);
                    // 返回true,继续页面关闭逻辑
                    return true;
                }
            }
        );
    </script>

2 调用方式1：点击 mui-action-back 控件，会触发返回

<div id="register" style="background: #fafafa;">
        <header class="mui-bar mui-bar-nav">
            <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="idCardImgBack">返回</span>
            <h1 class="mui-title">测试返回</h1>
        </header>
    </div>

3 调用方式2：使用 mui.back() 编程式返回。

mui.back();

# 三 父页面代码 #

1 放到js代码的最上面，监听 refresh 事件

<script type="text/javascript">
        window.addEventListener('refresh', function (e) {//执行刷新
            debugger;
            window.location.reload();
        });
    </script>

# 四 注意事项 #

因为涉及底层plus调用，所以一定要用真机进行测试。

# 五 Chrome真机调试方法 #

[https://www.jianshu.com/p/7c142ba59c21][https_www.jianshu.com_p_7c142ba59c21]

chrome://inspect/\#devices

[https_www.jianshu.com_p_7c142ba59c21]: https://www.jianshu.com/p/7c142ba59c21

发表评论取消回复

表情：

评论列表（有 0 条评论，491人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI-页面刷新

纯页面刷新 <script type="text/javascript"> mui.init({ pullRefresh :

落日映苍穹つ/ 2023年09月29日 11:35/ 0 赞/ 25 阅读

相关 mui back()返回刷新页面方法

在父页面中添加事件监听： window.addEventListener('refresh', function(e) { chaxun();//执

约定不等于承诺〃/ 2022年12月13日 04:06/ 0 赞/ 321 阅读

相关 mui返回上一页 html,mui back 返回刷新页面的实例

2个页面模拟 1.html mui.init() mui.plusReady(function()\{ alert('1') //var self=plus.web

清疚/ 2022年10月06日 07:58/ 0 赞/ 310 阅读

相关 JQuery实现返回页面功能

写在正文之前的话：通常项目页面内容比较多的话，当用户拖动滚动条连续浏览后，想返回页面顶部，这时候一键返回功能就显得格外方便。效果图： ![20190122164738

浅浅的花香味﹌/ 2022年03月24日 18:44/ 0 赞/ 549 阅读

相关 MUI的返回和刷新处理方法

//mui-action-back系统默认的返回不能返回，就直接关闭当前页面的处理 mui.back = function() { plus.webv

你的名字/ 2022年03月16日 05:16/ 0 赞/ 1515 阅读

相关 mui返回上一页刷新

mui中返回上一页并刷新，我只知道 2中方法，一种就是 mui.fire 至于用法在我其他文章里面有就不说了，说一个比较简单的。因为是返回上一页，所以只需要调用父类

柔光的暖阳◎/ 2022年03月02日 13:46/ 1 赞/ 886 阅读

相关 mui 子页面返回父页面并执行父页面的方法

在子页面执行的方法 if (window.plus) { plusready(); } else { document.addEventL

古城微笑少年丶/ 2022年02月04日 00:55/ 0 赞/ 644 阅读

相关 iframe 框架父页面刷新子页面

1.父页面添加： <script>　 function testBtn()\{ 　　 var reshSrc = document.getElementById('

向右看齐/ 2021年09月30日 14:38/ 0 赞/ 741 阅读

相关 layer 关闭父页面刷新

[https://www.cnblogs.com/xiaogou/p/11659852.html][https_www.cnblogs.com_xiaogou_p_116598

小鱼儿/ 2021年09月23日 13:02/ 0 赞/ 514 阅读

相关 MUI返回父页面刷新功能实现

一头文件引用 <script type="text/javascript" src="js/mui.js"></script> 二子页面代码定义 b

Love The Way You Lie/ 2021年07月24日 11:33/ 0 赞/ 492 阅读