MUI 页面跳转(传值+接收)
来源:互联网 发布:淘宝空间已满怎么删除 编辑:程序博客网 时间:2024/05/21 12:27
MUI 页面跳转(传值+接收)
官方:做web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,
如果通过有刷新的打开方式,用户要面对一个空白的页面等待;
如果通过无刷新的方式,用Javascript移入DOM节点(常见的SPA解决方案),会碰到很高的性能挑战:DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃;
mui的解决思路是:单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现.
mui.openWindow({ url:new-page-url, id:new-page-id, styles:{ top:newpage-top-position,//新页面顶部位置 bottom:newage-bottom-position,//新页面底部位置 width:newpage-width,//新页面宽度,默认为100% height:newpage-height,//新页面高度,默认为100% ...... }, extras:{ .....//自定义扩展参数,可以用来处理页面间传值 }, createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示 show:{ autoShow:true,//页面loaded事件发生后自动显示,默认为true aniShow:animationType,//页面显示动画,默认为”slide-in-right“; duration:animationTime,//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒; event:'titleUpdate',//页面显示时机,默认为titleUpdate事件时显示 extras:{}//窗口动画是否使用图片加速 }, waiting:{ autoShow:true,//自动显示等待框,默认为true title:'正在加载...',//等待对话框上显示的提示内容 options:{ width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度 height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度 ...... } }})
小实例:
页面 index.html
<script type="text/javascript" charset="utf-8"> mui.init(); mui.plusReady(function() { document.getElementById("test").addEventListener("tap", function() { mui.openWindow({ url: "search.html", id: "search", waiting: { autoShow: false }, extras:{ name:'testapp' } }); }); }); </script>
<a id="test"> 跳转 search.html </a>
页面 search.html
<script type="text/javascript" charset="utf-8"> mui.init(); //B页面onload从服务器获取列表数据; window.onload = function(){ //从服务器获取数据 //业务数据获取完毕,并已插入当前页面DOM; //注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后; mui.plusReady(function(){ var self = plus.webview.currentWebview(); var name = self.name; console.log(name); //关闭等待框 plus.nativeUI.closeWaiting(); //显示当前页面 mui.currentWebview.show(); }); } </script>
0 0
- MUI 页面跳转(传值+接收)
- MUI移动端页面跳转
- MUI:页面跳转问题(原生回跳到hb)
- 页面跳转参数接收
- mui几种页面跳转方式对比
- mui几种页面跳转方式对比
- MUI移动端页面跳转方式
- mui 多页面跳转 页面销毁新建BUG解决方案
- mui页面传参 页面跳转事件委托
- webapp mui & HTML5+ (四) 之 窗口(页面初始化、跳转、传参)
- mui解决 所有a标签 导航不能跳转页面
- MUI页面跳转调用原生等待框的解决方案
- mui解决跳转到页面返回不刷新问题
- mui 传参与接收
- MUI 页面传递参数(父传子)
- Android 页面跳转传递参数及页面返回接收参数
- mui开发APP教程之使用选项卡跳转子页面
- iOS接收推送消息跳转相应的页面问题
- 通俗理解信息熵
- 链接问题解决办法-LNK2001 无法解析的外部符号 __imp__RegQueryValueExA@24
- Java反射机制详解
- javascript中的原型(prototype)及原型链的继承方式
- 控制流图、圈复杂度
- MUI 页面跳转(传值+接收)
- ESP8266使用
- 【Java】JavaWeb文件上传和下载
- ReactNative源码篇:通信机制
- ListView,Spinner项内点击删除
- C语言动态创建二维数组代码
- Android内存优化大全(上)
- Bootstrap网格系统
- NSIS安装程序完成后运行某程序或某函数