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 相关文章推荐
javascript date格式化示例
Sep 25 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
vue中 v-for循环的用法详解
Feb 19 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
何时使用Map来代替普通的JS对象
Apr 29 Javascript
js判断两个数组相等的5种方法
May 06 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python实现二叉搜索树
2016/02/03 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
python3 pygame实现接小球游戏
2019/05/14 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
计算机求职信
2014/07/02 职场文书
初中学校对照检查材料
2014/08/19 职场文书
户籍证明格式
2014/09/15 职场文书
升职自荐信怎么写
2015/03/05 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS