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

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

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 打开新窗口的方式总结及注意事项，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Mui使用jquery并且使用点击跳转新窗口的实例

    网上好多朋友是这样做的: 全局插入了js代码 mui('body').on('tap', 'a', function () { document.location.href = this.href; }); 这样做是行的,但是有很多问题,比如点击侧栏的时候,就不出现,错误很多, 经实践自己的方法还是可行的,写多了jquery,竟然调试js原生老不成功.可能是生疏了,啥东西还是要用~ 那就先加入jquery @Scripts.Render("~/bundles/jquery") 好了,直

  • jQuery基于muipicker实现仿ios时间选择

    jQuery基于muipicker实现仿ios时间选择

    首先我们先来看原始的muipicker的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  • MUI 上拉刷新/下拉加载功能实例代码

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldown/ <!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> &l

  • MUI 解决动态列表页图片懒加载再次加载不成功的bug问题

    在项目开发中遇到这样的功能,要求实现列表页动态加载功能,在实现过程中遇到一些小小插曲,下面小编给大家详细说明下解决方法: 首次加载时图片可以获取成功,再次加载失败,通过chrome调试发现img 的 data-lazyload 属性没改变 调试的时候发现了bug $.fn.imageLazyload = function(options) { var lazyloadApis = []; this.each(function() { var self = this; var lazyloadAp

  • MUI Scroll插件的使用详解

    http://dev.dcloud.net.cn/mui/ui/#scroll 神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom对象,具体demo为: http://www.jb51.net/article/111085.htm 神坑2:scrollTo每次移动的距离,是相对于当前打距离的移动的,而不是移动到绝对的距离. scroll(区域滚动) 在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题: Androi

  • MUI实现上拉加载和下拉刷新效果

    本文实例为大家分享了MUI实现上拉加载和下拉刷新展示的具体代码,供大家参考,具体内容如下 编写存储过程分页(此处使用T-SQL) CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar(max), --字段字符串 @strWhere varchar(max), --where条件 @PageIndex int, --页码 @PageSize int, --每页容纳的记录数 @Sort VARC

  • mui开发中获取单选按钮、复选框的值(实例讲解)

    js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); return;} mui.toast(res); } function getRadioRes(className){ var rdsObj = document.getElementsByClassName(className); var checkVal = null; for(i = 0; i < rd

  • mui上拉加载功能实例详解

    最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" > <script src="js/jquery-3.2.0.min.js"></script> <script src="com

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

    一.什么是良好的用户体验(淘宝.易迅) 1.预加载截图方式:点击.切换模版窗口.显示等待框.执行ajax并渲染.显示数据.关闭等待框. 2.head.body分开载入方式:点击.切换窗口显示等待中.执行ajax并渲染页面.将渲染好的页面append到body中. 3.lazyload等方式感觉太贴近网页,就不算在良好用户体验内了. 二.注意事项 1.窗口切换时执行并发任务(ajax请求或渲染页面)会影响体验 2.无从得知webview渲染完毕的时机 3.使用pop-in应该将动画延长到200-3

  • 使用按钮控制以何种方式打开新窗口的属性介绍

    <!-- 把下面代码放到<body>区域中 --> 复制代码 代码如下: <form> <div align="left"> <input type="button" Value="打开新窗口" ONCLICK="window.open('index.htm','Sample','toolbar=yes,location=no,directories=no,status=no,men

  • JS打开新窗口防止被浏览器阻止的方法

    本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器阻止呢?其实办法还是有的,这里我们就来分析一下如何解决这个问题 我最近也遇到了这样的问题,所以就把弹出新窗口的方法分享给大家.欢迎大家补充哦... 第一种.使用原生javascript的window.open()方法(大部分情况下会被浏览自阻止) 第二种.模拟表单(form)提交,原理是指定表单的a

  • Ajax打开新窗口被浏览器拦截的两种解决办法

    最近在做支付时发现打开支付窗口时被浏览器拦截了,百度了一下才发现是因为打开窗口前用ajax验证是否能支付,所以不是用户主动触发的打开ixin窗口,浏览器认为这样不安全,所以给拦截了. 解决办法一 先开始打开一个空的新窗口,然后改变新窗口的url,具体代码为 var wd = window.open(); $.ajax({ type: "POST", dataType: "json", url: URL, data: {orderNo:orderNo}, succes

  • Ajax请求成功后打开新窗口地址

    废话不多说,关键代码如下所示: jQuery.ajax({ "type":"post", "url":"http://www.baidu.com", "success":function(rel){ if(rel.isSuccess){ window.open(rel.url,"_blank"); } } }); 这个url请求成功后window.open(rel.url,"_

  • 使用jquery实现以post打开新窗口

    网络上已有此功能的函数,是以纯JS实现.但是在项目中发现,此函数无法兼容Firefox,由此我重写了此方法. 复制代码 代码如下: //默认新窗口配置 var windowDefaultConfig = new Object; windowDefaultConfig['directories'] = 'no'; windowDefaultConfig['location'] = 'no'; windowDefaultConfig['menubar'] = 'no'; windowDefaultC

  • vue打开新窗口并实现传参的图文实例

    vue打开新窗口并实现传参的图文实例

    我要实现的功能是打开一个新窗口用来展示新页面,而且需要传参数,并且参数不能显示在地址栏里面,而且当我刷新页面的时候,传过来的参数不能丢失,要一直存在,除非我手动关闭这个新窗口,即浏览器的标签页. 通过面向百度编程,发现网上的根本达不到这个效果,而且还都是坑,明明实现不了,还若有其事的写出来,于是我在标题特意加上有图有真相,诚我不欺,实现不了功能,就不要出来糊弄人. 先把我做好的代码写出来,后面再介绍别人实现不了的坑,以及这方面相关要注意的. 打开新窗口并传参代码 //打开新窗口并传参,参数不能显

  • Windows使用docker打开新窗口error解决办法

    error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.26/containers/json: open //./pipe/docker_engine: The system cannot find the file specified. In the default daemon configuration on Windows, the docker client must be run elevated to c

  • js打开新窗口方法整理

    window.location="aaa.aspx" 上面的方法只能在当前页打开,如果要在新的页面打开,最简单的是用以下方法 form.target="_blank"; form.action="aaa.aspx"; form.submit(); window.top.location=url 可以在iframe中的页面在父窗口刷新打开 window.open方法可控制的样式丰富,比如我们可以控制窗口显示的大小,窗口显示的内容,以及位置等等.都是

  • javascript打开新窗口同时关闭旧窗口

    其实这个问题和浏览器的版本息息相关,作为菜鸟的我,直到现在也没有找到完美的解决办法.没办法,因为业务必须要实现,所以只好用另一种方法去做了:通过重定向URL实现打开新窗口的同时"关闭"旧窗口 test1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> test1 </TITLE>

随机推荐