当前位置: 代码迷 >> 综合 >> MUI页面带参跳转,提交数据后带参回退给父页面并触发函数
  详细解决方案

MUI页面带参跳转,提交数据后带参回退给父页面并触发函数

热度:51   发布时间:2024-02-02 13:55:48.0

父页面 a.html 的js

<script src="../js/mui.min.js"></script>
<script src="../js/mui.view.js "></script>
<script src="../js/app.js"></script><script>mui.init({ swipeBack: false });//点击li列表行触发,跳转到b.html$('#nav_items').on('tap', 'li', function() {var village_id = document.getElementById("village_id").innerHTML;mui.openWindow({url: 'b.html',//文件路径,不同根目录下不同,此案例是字父同目录下id: 'b.html',//id自己可以定义名称,但与下面getWebviewById要对应styles: {top: 0, //新页面顶部位置//   bottom:51,//新页面底部位置},waiting: {autoShow: false //自动显示等待框,默认为true					 },extras: {'village_id': village_id //带的参数}});});//接收b.html传过来的参数
//触发的函数名称与子页面的要对应window.addEventListener("sendUnitSuccess", function(e) {//获得事件参数document.getElementById("score").value = e.detail.score; document.getElementById("remark").innerHTML = e.detail.remark; document.getElementById("location").innerHTML = disNull(e.detail.location);路地//关闭子页面var ws = plus.webview.getWebviewById("b.html");plus.webview.close(ws);//我这里不需要重新加载数据,根据个人需求来//location.reload();//刷新页面});</script>

子 页面b.html的js

<script src="../js/mui.min.js"></script>
<script src="../js/mui.view.js "></script>
<script src="../js/app.js"></script><script type="text/javascript">
//初始化
mui.init({swipeBack: false
});//获取a.html(父页面)传过来的参数
mui.plusReady(function(){var self = plus.webview.currentWebview();document.getElementById("village_id").innerHTML = self.village_id;....省略要执行的步骤了...
}//提交事件
document.getElementById("submitButton").addEventListener("tap", function() {var score=document.getElementById("score").value;  //得分var remark = document.getElementById("remark").value;//问题点描述var location = document.getElementById("location").value;//点位描述//获取当前页面的父级var opener = plus.webview.currentWebview().opener(); //触发自定义事件,实现页面传值						  mui.fire(opener, 'sendUnitSuccess', {"score":score,"remark":remark,"location": location});//返回父页面mui.back();});
</script>

 

  相关解决方案