最近在优化自己用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. 2019华工校赛 B - 修仙时在做什么?有没有空?可以来炼丹吗?

    题目链接:https://ac.nowcoder.com/acm/contest/625/B 解法:这题其实就是求2^18个点内最近的两个点的距离.我们可以容易想到朴素解法:把每个点作为源点跑最短路取 ...

  2. 转帖 使用eclipse创建之前没有创建的web.xml

    由于在下学习Java的时间不长,所以对于一些工具的使用不太熟悉,特别是eclipse,虽然这是一款强大的Java编译工具但是现有汉化版.所以在实际使用的时候难免会遇到各种各样的麻烦.今天就遇到了一个: ...

  3. python 装饰器的坑

    今天研究了下装饰器,添加重试功能遇到了个坑,跟大家分享一下: 代码如下: def re_try(maxtry): print locals() def wrapper(fn): print local ...

  4. es5-class

    1. 通过class定义类/实现类的继承2. 在类中通过constructor定义构造方法3. 通过new来创建类的实例4. 通过extends来实现类的继承5. 通过super调用父类的构造方法6. ...

  5. linux上文件内容去重的问题uniq/awk 正则表达过滤操作

    .uniq:只会对相邻的行进行判断是否重复,不能全文本进行搜索是否重复,所以往往跟sort结合使用. 例子1: [root@aaa01 ~]# cat a.txt 12 34 56 12 [root@ ...

  6. Scala(一)基础

    OOP 面向对象编程 AOP 面向切面编程 FP 函数式编程 编程语言都要定义变量,一些代码是用来注释的,变量和变量之间有一些关系,要做一些运算,运算离不开流程控制,进行运算的数据往往来自数据结构,最 ...

  7. JCF——Map

    Hashtable LinkedHashMap Properties

  8. 基础(三):yum(RedHat系列)和apt-get(Debian系列 )用法及区别

    文章转载来自:http://blog.csdn.net/chengly0129/article/details/70169760 一般来说著名的linux系统基本上分两大类:1.RedHat系列:Re ...

  9. Python 生成json文件

    1.数据准备 数据下载 2.python代码 import datetime import os import mssqlhelper ms = mssqlhelper.MSSQL(host=&quo ...

  10. 攻防世界 MISC篇

    Excaliflag 一张图片,winhex打开没什么发现,分值不高,应该属于常见的图片隐写题目.如果对于图片的格式有详细的了解,应该很容易就能够知道了属于最低有效位(LSB)隐写,下面是通过phot ...