HBuilder mui页面传值的几种方式
来源:互联网 发布:淘宝不能卖电子书了 编辑:程序博客网 时间:2024/06/05 01:14
HBuilder开发思想和传统APP开发不太一样,页面间传值的方式也略有不同,不同的方式适用于不同的场景,简单总结下。
1 页面预加载或创建时传值
页面预加载有两种方式,mui.init()和mui.preload().前者支持同时预加载多个页面,后者只能每次预加载一个页面。
1.1 通过mui.init()向预加载页面传值
mui.init({ preloadPages:[{ url:prelaod-page-url, id:preload-page-id, styles:{}, extras:{ name:'csdn' },//在这里添加要传递的参数 ... }, ...]});
页面中接收参数方式:
mui.plusReady(function(){ var self = plus.webview.currentWebview(); var name = self.name;//获得参数});
1.3 通过mui.preload()向预加载页面传递参数
var page = mui.preload({ url:new-page-url, id:new-page-id, styles:{}, extras:{ name:'csdn' }//自定义扩展参数});
接受参数同上
1.3 通过mui.openWindow()向页面传递参数
如果页面已经预加载过,这时候只会显示此页面,并不会创建,这里传递的参数也不会被接收到,应该在页面预加载的地方传值。如果页面没有被预加载过,每执行一次openWindow都会重新创建并打开页面,这样传值有效。
mui.openWindow({ url:'info.html', id:'info.html', extras:{ name:'csdn' }});
1.4 通过mui.init()向子页面传递参数
mui.init({ subpages:[{ url:your-subpage-url, id:your-subpage-id, styles:{}, extras:{}//在这里添加自定义参数 }] });
子页面获取参数方法同上
2 在已打开的页面间传值
上面介绍的方法都是在页面初始话的时候传值,有一定的局限性。在列表-详情页中,详情页一般采用预加载模式,如果希望点击列表中某一项后,显示并更新详情页,通过以上提到的方法是行不通的。这时候就需要自定义事件了。
假定现在有一个列表页list.html和一个详情页details.html。如果希望list给details传递一个名为”id”的自定义参数。
首先要知道怎样在list中调用details页面,在mui框架中,任意页面都有一个id,这个id默认和url一样,也可以自定义。
假设list和details定义如下:
//App首页打开列表页mui.openWindow({ url:'list.html', id:'list'});//list页面中预加载details页面mui.init({ preloadPages:[{ url:'details.html', id:'details' }]});var detailPage;//点击list中某一项时触发details页面的"update"事件mui('ul.mui-table-view').on('tap','li',function(evt){ if(!detailPage){//获得页面 detailPage = plus.webview.getWebviewById('details'); } mui.fire(detailPage,'update',{//触发事件 id:this.getAttribute('data-guid'); }); detailPage.show('slide-in-right',300);//显示详情页});//在details页面接收id参数window.addEventListener('update',function(event){ //获得事件参数 var id = event.detail.id; //根据id向服务器请求新闻详情 .....});
同样的道理,如果希望在详情页浏览完之后更新列表页对应块(比如更新阅读次数),也可以在详情页中触发列表页的事件,然后在列表页监听事件:
//details.html中触发list的update事件var list=plus.webview.getWebviewById('list');mui.fire(list,'update',{//触发自定义事件 id:'myid'});mui.webview.currentWebview().hide("auto", 300);//隐藏当前页面//list页面中监听事件window.addEventListener('update',function(evt){ var id=evt.detail.id; //do something});
阅读全文
0 0
- HBuilder mui页面传值的几种方式
- Hbuilder app几种打开页面的方式
- Hbuilder MUI 页面刷新及页面传值问题
- Hbuilder MUI 页面刷新及页面传值问题
- mui几种页面跳转方式对比
- MUI-几种页面打开方式
- mui几种页面跳转方式对比
- HBuilder mui 入门教程——(3)页面传值
- hbuilder mui 移动网页 页面传参
- HBuilder中的MUI页面
- HBuilder开发App教程08-几种页面打开方式
- Hbuilder的mui
- HTML5,MUI方式页面传值
- 页面传值的几种方式
- Hbuilder--mui--webview切换子页面问题
- HBuilder MUI 实现关闭除指定页面外的其他所有页面的功能
- mui页面间的传值
- mui 页面间传值得2种方式
- 字符串A中出现B时就用C来代替
- [Unity]适合独立开发者的几款画图软件
- 简单的Banner轮播展示
- 软件设计风格 之 注解(Annotation)、配置文件、xml 的比较
- spring-boot使用教程(一):让程序跑起来
- HBuilder mui页面传值的几种方式
- 图像分类
- Linux中必须掌握的常用命令
- 二叉树的层次遍历 II -LintCode
- ajax三级联动
- 正则表达式
- 最大子阵和(百度2017秋招真题)
- oracle安装与卸载
- PTA练习题.高考状元