mui开发APP中子页面操作父页面的方式总结。
来源:互联网 发布:主机屋域名如何解析 编辑:程序博客网 时间:2024/06/06 14:00
mui开发APP过程中学习使用滑动切换底部选项卡时遇到一个问题,底部选项卡和头部是在父页面,其中有四个子页面是底部选项卡对应的四个窗口页面,但是在子页面打开一个新webview页面时发现打不开,甚至还出现即使打开了,父页面还在,毕竟是在子页面操作的,所以父页面存在也合理,所以就需要在子页面来操作父页面。
当然,发现在子窗口页面中打开新页面的方式最简单的就是就是top方式,这样新的webview页面就会沾满整个窗口,父页面被遮住。
top.mui.openWindow(url)
如果想在子页面来操作父页面,又该用什么方法呢?那就是evalJS,需要配合一个触发事件比如点击才能执行。
直接用下面的代码演示,都是亲自测试过完全可以用的,案例中使用了hcoder的h.js,也可以不用,h.js最大的好处就是简化了对dome页面的操作,可以说是小型的jQuery吧,我是特别喜欢用的。
案例中是子页面在执行完向左滑动后,修改父窗口页面的底部选项卡的状态和头部的title文字内容。
<script src="js/mui.min.js"></script><script src="js/libs/h.js"></script><script>mui.init({preloadPages:[{ url: 'parcar-search.html', id : 'parcar-search.html' }]});var _self, _next, timer;mui.plusReady(function(){ _self = plus.webview.currentWebview(); _next = plus.webview.getWebviewById('sub2.html'); index = plus.webview.getWebviewById('index.html'); _self.drag( { direction : "left", moveMode : "followFinger" }, { view : _next, moveMode : "follow" }, function(e){ if(e.type == 'end' && e.result){ index.evalJS("h('#tabBar').find('a').removeClass('mui-active'); h('#navBarSecond').addClass('mui-active');h('#title').html('提货派车');"); }; } );});其重点理解evalJS的内容,index.evalJS是指在父窗口页面下执行evalJS,执行哪些动作就是自己定义的啦,案例是添加和删除了class和修改title的文字innerHTML
index.evalJS
这是目前我用到的子页面操作父页面的最佳方式,也欢迎留言说车其它更好的方式。
2 0
- mui开发APP中子页面操作父页面的方式总结。
- iFrame中子页面实现对父页面的操作
- 父页面操作iframe中子页面的锚点
- mui开发h5+app过程中页面间参数传递的总结第一篇
- mui 开发知识积累-------打开页面的方式
- MUI列表页面打开详细页面的方式
- MUI+Htmlplus开发APP实现页面之间传值
- HTML5+开发移动app教程4-mui中几种open页面的区别
- HTML5+开发移动app教程4-mui中几种打开页面的区别
- HTML5+和MUI页面操作
- iframe中子页面调用父页面的js方法
- jQuery: 父页面调用iframe中子页面的DOM对象
- js中子页面给父页面的控件赋值
- HBuilder mui页面传值的几种方式
- HTML5,MUI方式页面传值
- mui几种页面跳转方式对比
- MUI-几种页面打开方式
- mui几种页面跳转方式对比
- java SSM(Spring+SpringMVC+MyBatis)maven项目 intellij idea 2017配置 MAC,(Linux,ubuntu,centos 只要更改相应目录即可)
- ecshop数据库表与模板结构、源码分析在线说明文档
- There was a problem confirming the ssl certificate ……
- error: zlib.h:no such file or directory
- 【LeetCode】2. Add Two Numbers C语言
- mui开发APP中子页面操作父页面的方式总结。
- javascript对象深拷贝。
- 总结OnOK()、OnCancel()、OnClose()、OnDestroy()之间的区别(转)
- swift中如何构造单列
- 在Windows的CMD中如何设置支持UTF8编码
- css
- v9如何修改搜索列表页结果以时间降序排列
- 2016蓝桥杯C/C++B组第九题 交换瓶子
- Oracle数据库对表数据的基本操作和Oracle字符串、数值、日期、空值操作及它们相对应的函数操作