• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >HBuilder教程 > mui如何实现页面加载完后再显示数据来提升用户体验的方法

mui如何实现页面加载完后再显示数据来提升用户体验的方法

作者:教程 字体:[增加 减小] 来源:互联网 时间:2017-05-31

本文主要包含mui刷新当前页面,mui打开新页面,mui创建子页面,mui关闭当前页面,mui 打开子页面等相关知识,教程希望在学习及工作中可以帮助到您
"); </div> 假设主页面是list,点击list item时,进入到子页面,子页面的内容是从网上加载进来的,传统的方法是使用mui.openWindow({params}),而如果我们的子页面有很多内容需要加载,而且网速不好的话,可能切换到子页面会先显示“白屏”,然后内容慢慢的浮现出来,极度影响使用体验,我们可以使用mui的“现加载”方法。

何谓“现加载”?

“现加载”的意思就是当我们点击list item后,子页面加载内容,这个时候不让子页面展示,弹出等待框,提示用户“数据正在加载”,当子页面的内容完全加载完毕后,再展示。

如何“现加载”?

现加载的方式在mui里使用起来很简单,
首先在主页面声明一个等待框,并创建子页面:

用plus.webview.create()方法,而不是mui.openWindow({params})
var nwaiting = plus.nativeUI.showWaiting(); 
webviewShow = plus.webview.create(url);
然后在子页面数据加载完成后的回调中将子页面show出来,并关闭等待框:

var currentView = plus.webview.currentWebview();
currentView.show('slide-in-right', 300);
plus.nativeUI.closeWaiting();

搞定!


您可能想查找下面的文章:

  • mui几种页面跳转方式对比
  • mui关闭其它页面,首页以及当前窗口对象不关闭
  • MUI-页面传参数
  • MUI页面跳转调用原生等待框的解决方案
  • mui如何实现页面加载完后再显示数据来提升用户体验的方法
  • MUI 解决弹出输入法时页面高度变小导致底部上浮的问题
  • MUI 判断子页面是否加载完成在显示父页面
  • MUI 页面传参大总结
  • mui使用pop-in动画,页面二次渲染的问题,求解

相关文章

  • 2017-05-31Mui开发webapp项目demo
  • 2017-05-31hbuilder真机运行和打包的差异
  • 2017-05-31iOS平台-Native.js获取包名
  • 2017-05-31mui切换div模式选项卡横向平移特效(借用mui官方图片轮播特效实现)
  • 2017-05-31HBuilder 入门(1)
  • 2017-05-31html5+ plus和phoneGap、cordova的比较
  • 2017-05-31HBuilder MUI 打开页面默认弹出键盘及返回关闭键盘
  • 2017-05-31MUI框架预加载
  • 2017-05-31Hbuilder MUI 用原生js添加或移除class属性
  • 2017-05-31HTML5 Plus 拍照或者相册选择图片上传

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • H5+MUI+Node.js+Socket.io群组即时聊天+发送图片+图片压缩
    • MUI新手指南
    • Mui开发webapp项目demo
    • HBuilder 入门(1)
    • HTML5 Plus 拍照或者相册选择图片上传
    • HBuilder MUI 远程文件缓存到本地
    • mui项目中如何使用原生JavaScript代替jquery来操作dom
    • Hbuilder MUI 微信支付、分享、登陆说明
    • Hbuilder MUI 学习总结
    • a页面打开b页面,b页面加载成功后关闭当前页面,闪屏

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有