最近在优化自己用mui开发的app,主要还是针对交互这块儿,这里简单给大家说一下问题点场景,就是我是通过动态添加底部tabBar的方法创建了一个底部可以切换的操作区域,代码如下:

mui.init();
var defaultpage = "tab-webview-subpage-product.html"; // 定义默认选项卡子页面
var newPage = '';
// 定义所有子页面
var subpages = ['tab-webview-subpage-product.html', 'tab-webview-subpage-shopping.html',
'tab-webview-subpage-me.html'
];
// 页面加载完成后加载子页面
mui.plusReady(function() {
var current = plus.webview.currentWebview(); //获取当前页面的窗口对象
// 加载所有子页面
for (let i = 0; i < 3; i++) {
var sub = plus.webview.create(subpages[i],subpages[i], {
top: '0px',
bottom: '50px'
}
);
// 除默认页面外,其他子页面隐藏
if (subpages[i] != defaultpage) {
sub.hide();
}
current.append(sub); // 子页面加入窗口对象
}
});
// 创建点击事件
mui("#nav-tabbar").on("tap", "a", function(e) {
newPage = this.id + ".html";
if(defaultpage == newPage) {
return;
};
plus.webview.hide(defaultpage); // 隐藏上一个子页面
plus.webview.show(this.id + ".html") // 显示当前点击页面
newPage = defaultpage = this.id + ".html"; // 记录当前点击页面
});

这种方法生成的多个html页面有一个问题,就是无法使用mui.ready或mui,plusReady来监听该页面被加载了,从而无法做一些刷新页面内容或者数据的操作,此时会想到用自定义事件mui,fire方法,但是经验证也行不通,这里的解决方法只能是在有刷新要求的页面写如下代码即可

mui.plusReady(function () {
// 每次进入到这个页面触发下面的函数

plus.webview.currentWebview().addEventListener("show",function(){

//这里定义你的处理方法

},false);

})

mui框架页面每次加载操作的更多相关文章

  1. mui框架上下拉加载

    mui框架被定位为“最接近原生体验的移动App的UI框架”. 写下mui框架中常用的两个功能,下拉刷新和上拉加载,没有后台交互,用js写假数据模拟,下面直接上代码. <!DOCTYPE html ...

  2. 页面每次加载时重新获取css文件

    <script> (function(){ var version=''; var xmlhttp; // code for IE7+, Firefox, Chrome, Opera, S ...

  3. 使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。

    套用mui官方文档的一句话:“开发者只需关心业务逻辑,实现加载更多数据即可”.真的是不错的框架. 想更多的了解这个框架:http://dev.dcloud.net.cn/mui/ 那么如何实现下拉刷新 ...

  4. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  5. 使用selenium操作ant design前端的页面,感觉页面没加载完

    因需要收集页面数据,遂准备使用selenium爬取瓦斯阅读页面, 瓦斯网站使用的是ant design,元素定位非常困难,页面元素都没有ID,现在还只是能做到操作登录,不能自动打开订阅,查询某公众号, ...

  6. 前端技术-HTML页面的加载

    HTML页面的加载 HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉 ...

  7. 关于asp.net中页面事件加载的先后顺序

    一.ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件 ...

  8. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  9. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

随机推荐

  1. centos7上的h5ai折腾记

    过程: 安装php-fpm和nginx,且经验证二者在其他项目可以正常使用. 从debian8拷贝过来_h5ai的nginx配置如下: location ~ [^/]\.php(/|$) { fast ...

  2. 项目案例之GitLab的数据迁移

    项目案例之GitLab的数据迁移 链接:https://pan.baidu.com/s/1CgaEv12cwfbs5RxcNpxdAg 提取码:fytm 复制这段内容后打开百度网盘手机App,操作更方 ...

  3. node快速入门

    nodejs是一个方兴未艾的技术,近几年一直活跃在各大论坛.其实nodejs也只是新瓶装旧酒,只是它的一些激进的特性使她显得很神秘.nodejs使用的是JavaScript的语法,所以在学习nodej ...

  4. Java高并发网络编程(四)Netty

    在网络应用开发的过程中,直接使用JDK提供的NIO的API,比较繁琐,而且想要进行性能提升,还需要结合多线程技术. 由于网络编程本身的复杂性,以及JDK API开发的使用难度较高,所以在开源社区中,涌 ...

  5. Database - 数据库隔离级别

    总结 数据库在并发的情况下,可能会出现: 脏读 不可重复读 --> 原因:UPDATE操作 幻读 --> 原因:INSERT/DELETE操作 为了避免以上问题,数据库事务增加隔离级别,来 ...

  6. SpringBoot项目部署初体验【Docker】

    前言 一个微服务项目,小到几个模块,大到十几二十几个模块,每个模块都是单独的SpringBoot工程,这么多模块的部署,部署成本真的很高,而且每个服务的部署,都是手动部署,打成war或者jar ?,一 ...

  7. SQL Select选择

    SQL Select(选择) 语法 SELECT 语法用于从数据库中选择数据. 返回的数据存储在结果表中,称为结果集. SQL SELECT 语法 SELECT column1, column2, . ...

  8. lct 模版题 bzoj 2002 2049

    很早就有人给我推荐的模版题,然后我最近才刷的(' '    ) 昨天的tree 不知道比他们高到哪里去了,我和他谈笑风生啊! bzoj 2002 弹飞绵羊 重点:这道题的cut和link 由于这道题链 ...

  9. jdk环境配置-windows 10

    近期由于云服务器到期,重新买了一个云服务器,这里顺便把jdk环境配置步骤做一个记录 1.下载自己需要的jdk 我这里是下的免安装版的  2.计算机(此电脑)->属性->高级系统设置-> ...

  10. (转)OpenFire源码学习之二:Mina基础知识

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43413009 Mina概述 Apache MINA(Multipurpose Infra ...