mui刷新当前页面和返回当前页面刷新处理

最新推荐文章于 2023-06-02 14:19:06 发布

原创最新推荐文章于 2023-06-02 14:19:06 发布 · 9.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#mui页面刷新

H5混合开发专栏收录该内容

17 篇文章

订阅专栏

本文介绍了使用MUI框架时两种常见的页面刷新方法：一种是在同一页面内触发数据更新后的刷新；另一种是从另一个页面返回时触发的刷新。前者只需简单调用location.reload()即可实现；后者则需要利用plus.webview模块配合mui.fire()方法来完成跨页面的数据同步刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：使用mui开发的时候出现一个需求是刷新当前页面，有一个列表数据展示项，当点击删除其中一项让页面做一个刷新：

只需要在删除逻辑后添加一句：location.reload();就可以了。

2：当A页面进入B页面后在B页面做了操作，当在B页面完成操作后返回A页面后要在A界面做刷新处理：

在B界面添加如下：

mui.init({
beforeback: function() {

var webView = plus.webview.currentWebview().opener();//为webView为需要刷新的页面，也可以通过
//var webviewA = plus.webview.getWebviewById(id);获取，其中id为相对当前界面的A界面路径

//refresh是A页面自定义事件
           mui.fire(webView, 'refresh');//其中refresh这个关键字两个界面要一致。
           //返回true,继续页面关闭逻辑
           return true;
       }
   })

在需要返回刷新的A界面：

/**
       * 初始化加载
       */
       window.onload = function() {
           window.addEventListener('refresh', function() {
               location.reload(); //父页面仅仅是刷新页面，当然也可以自定义逻辑函数写在里面
           })
       }