最近在优化自己用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. 创建win32 dll 空项目

    动态库,多字节 win32 空项目 添加导出头文件  类 导入: #pragma once #ifndef IP_CLASS_DLL_H #define IP_CLASS_DLL_H #pragma ...

  2. day06 python is == 编码 解码

    day06 python   一. is 和 == 的区别     == :比较, 判断, 比较的是值: 可以比较数字, 字符串, 列表, 元组, 字典,等     is :是 比较, 比较的是内存地 ...

  3. vue撸的demo

    之前做过一个layui+flask的测试平台,后来听说vue挺火,学了下,做个记录 一.想法 主要想开发几大功能,方便以后复用 1.工作中常常需要记录知识,所以我决定会做一个类似markdown笔记的 ...

  4. favicon.ico引用

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> ...

  5. vue之路由导航守卫-全局前置守卫

    一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...

  6. clickhouse高可用-节点宕机数据一致性方案-热扩容

    1. 集群节点及服务分配 说明: 1.1. 在每个节点上启动两个clickhouse服务(后面会详细介绍如何操作这一步),一个数据分片,一个数据备份,为了确保宕机数据一致性,数据分片和数据备份不能同一 ...

  7. Shiro学习(20)无状态Web应用集成

    在一些环境中,可能需要把Web应用做成无状态的,即服务器端无状态,就是说服务器端不会存储像会话这种东西,而是每次请求时带上相应的用户名进行登录.如一些REST风格的API,如果不使用OAuth2协议, ...

  8. H5项目(基于vue框架)常见问题及注意事项

    参考: https://blog.csdn.net/u012377333/article/details/52326158 1.前端中所有的按钮,点击后发送报文的标签,都必须加上 去重功能.防止重复发 ...

  9. HTML标签类总结

    1.a标签除了可以作为连接也可以发送邮箱,a标签里的文本颜色不能继承父级的. 2.有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:h1.h2.h3.h4.h5.h6.p. ...

  10. Tomcat运行错误示例

    tomcat运行错误示例 当出现这种错误时,如果是自己配置的tomcat,需要找/conf/server.xml文件. 如果是使用的eclipse tomcat 插件,需要在你的工作空间 找到 如下文 ...