mui 打开新窗口的方式总结及注意事项


Posted in Javascript onAugust 20, 2017

一、什么是良好的用户体验(淘宝、易迅)

1、预加载截图方式:点击、切换模版窗口、显示等待框、执行ajax并渲染、显示数据、关闭等待框。

2、head、body分开载入方式:点击、切换窗口显示等待中、执行ajax并渲染页面、将渲染好的页面append到body中。

3、lazyload等方式感觉太贴近网页,就不算在良好用户体验内了。

二、注意事项

1、窗口切换时执行并发任务(ajax请求或渲染页面)会影响体验

2、无从得知webview渲染完毕的时机

3、使用pop-in应该将动画延长到200-300毫秒,让切换效果更流畅

三、打开新窗口方法

1、head、body分开载入

(1)先显示带有标题栏的head页面,content中显示"加载中..."或者显示SVG动画

(2)通知body页面执行ajax拉取数据渲染页面,渲染完毕append到head页面上

2、页面渲染后再切换

(1)点击后显示等待框

(2)通知show页面执行ajax拉取数据渲染页面

(3)渲染代码结束后,延迟50ms关闭等待框,显示出show页面。

3、预加载页面直接切换

(1)点击后切换到预加载的页面

(2)显示等待框,执行ajax拉取数据渲染页面

(3)渲染代码结束后,关闭等待框

注:此种方法为了避免打开新的页面数据不对,需要监听重写mui.back(),清空页面的所有数据。

总结

以上所述是小编给大家介绍的mui 打开新窗口的方式总结及注意事项,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
react 组件传值的三种方法
Jun 03 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
ES6扩展运算符的用途实例详解
Aug 20 #Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 #Javascript
Vue动态组件实例解析
Aug 20 #Javascript
jQuery实现表格冻结顶栏效果
Aug 20 #jQuery
Vue组件实例间的直接访问实现代码
Aug 20 #Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 #Javascript
React Native 环境搭建的教程
Aug 19 #Javascript
You might like
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
js实现京东轮播图效果
2017/06/30 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
vue实现计步器功能
2019/11/01 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
python根据日期返回星期几的方法
2015/07/06 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
Python命令行解析模块详解
2018/02/01 Python
python中实现字符串翻转的方法
2018/07/11 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
个人求职简历中英文自我评价
2013/12/16 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS