首先是主页面的js
//mui初始化
mui.init();
//页面切换功能
//声明数组存放页面地址
var subpages = ['product-center.html', 'order-form.html', 'sales-promotion.html', 'shop-car.html', 'user.html'];
//声明样式
var subpage_style = {
top: '0px',
bottom: '51px'
};
var aniShow = {};
//创建子页面，首个选项卡页面显示，其它均隐藏；
//如果需要使用大H5+对象，就写到plusReady中，如plus对象。
mui.plusReady(function() {
//获取当前窗口对象
var self = plus.webview.currentWebview();
for(var i = 0; i < subpages.length; i++) {
var temp = {};
//创建窗口对象,参数1是地址,参数2是id,参数3是样式
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
//当循环大于0的时候隐藏页面
if(i > 0) {
sub.hide();
} else {
temp[subpages[i]] = "true";
//方法作用合并对象参数1为需要合并的目标对象,
//参数2为需要合并的对象
mui.extend(aniShow, temp);
}
//通过上边方法创建的页面，当子页面内容重复加载几次或者刷新几次后，
//父页面的返回功能不是直接返回父页面之前的页面，
//会先把子页面的历史返回一遍
//sub.show();
//通过上边方法创建的子页面，不管子页面怎么返回刷新加载，
//父页面的返回，就是直接返回父页面的前一个页面
self.append(sub);
} });
//当前激活选项 当前窗口对象
var activeTab = subpages[0];
//选项卡点击事件
//除了可以使用addEventListener()方法监听某个特定元素上的事件外，
//也可以使用.on()方法实现批量元素的事件绑定。
//参数1,需要监听的事件名(tap敲击事件),参数2需要选择器(a标签),参数3事件触发回调函数
mui('.mui-bar-tab').on('tap', 'a', function(e) {
//dom函数 方方法返回指定属性名的值
var targetTab = this.getAttribute('href');
if(targetTab == activeTab) {
return;
}
//显示目标选项卡
//若为iOS平台或非首次显示，则直接显示
if(mui.os.ios || aniShow[targetTab]) {
//点击当前显示的页面时显示当前页面
plus.webview.show(targetTab);
} else {
//否则，使用fade-in动画，且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow, temp);
//显示点击窗口
//显示页面参数1 窗口id或对象,参数2为动画效果,参数3为动画持续时间
plus.webview.show(targetTab, "fade-in", 300);
}
//隐藏当前当前窗口;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
//更改点击窗口对象到当前窗口对象
activeTab = targetTab; });
//自定义事件，模拟点击“首页选项卡”
//添加自定义事件
document.addEventListener('gohome', function() {
//获取首页选项卡的id
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
//事件触发函数参数1为dom元素 参数2为事件名
mui.trigger(defaultTab, 'tap');
//切换选项卡高亮
//querySelector选取返回的第一个dom元素
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
//当前显示对象不等于点击对象时
if(defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
} });
//子页面的函数
mui.init();
function al(){
alert('1')
}
al();
子页面的函数只有在主页面加载的时候执行一次,如何做才能让页面切换到这个子页面的时候就会执行
3 个回复
4***@qq.com (作者)
搞定了,在主页面添加了重载子页面的方法
document.getElementById('car').addEventListener('tap',function(){
mui.plusReady(function(){
var wobj = plus.webview.getWebviewById("shop-car.html");
wobj.reload(true);
})
})
五叶神 - 世界上没有免费的午餐，也不要有一颗贪婪的心
注意 href 我APP里面页面id全部都是以 url 直接定义获取的，如果你的不是请自己修改
五叶神 - 世界上没有免费的午餐，也不要有一颗贪婪的心
。。。。 你这是重复加载子页面了
你这里除了user页面其他页面应该都不需要每次点击都去重载，user单独添加 监听load数据的方法就行
4***@qq.com (作者)
感谢,学习了.
2017-08-11 18:34
Always可接单
我也遇到了这个问题 但是你写的这个 没看明白
2017-10-25 03:25
五叶神
原理就是初始打开APP的时候只有第一个子页面加载数据，其他子页面不执行加载数据的方法，点击底部菜单切换的时候再通过fire去更新数据，子页面默认给个flag=false，第一次点击的时候加载数据，设置flag=true，加载数据，如果还是不明白就在应用宝下载个himall.apk解压看下我的源码
2017-10-25 08:42
想知道真机运行
回复 4***@qq.com:求解答一下，这段代码在哪里执行
2017-12-27 13:40
五叶神
回复 想知道真机运行:第一段在 父页面，第二段在子页面
2018-01-02 16:22
想知道真机运行
谢谢了@57496
2018-02-02 16:51