主页面加载时附带4个子页面,第一个子页面由于要加载js模板,所以在加载的时候有1-2秒的白屏,请问有什么好的解决方案? 后面是主页面的代码.
//主页面是一个底部导航加载进来后默认点击第一个子页面,但是会出现1-2秒的白屏.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<style type="text/css">
body{
font-family: "微软雅黑";
}
</style>
</head>
<body>
<!--底部导航-->
<div class="mui-content">
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="main-promotion.html">
<span class="mui-icon iconfont icon-cuxiao1"></span>
<span class="mui-tab-label">促销专区</span>
</a>
<a class="mui-tab-item" href="main-merchandise.html">
<span class="mui-icon iconfont icon-chanpinzhongxin"></span>
<span class="mui-tab-label">产品中心</span>
</a>
<!--<a class="mui-tab-item" href="main-orders.html">
<span class="mui-icon iconfont icon-dingdan1"></span>
<span class="mui-tab-label">订单中心</span>
</a>-->
<a class="mui-tab-item shop-card" href="main-car.html" id="car">
<span class="mui-icon iconfont icon-gouwuche2"><span class="mui-badge">0</span></span>
<span class="mui-tab-label">购物车</span>
</a>
<a class="mui-tab-item" href="main-user.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">个人中心</span>
</a>
</nav>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/myself-js/main.js" type="text/javascript" charset="utf-8"></script>
</body> </html>
这里开始是js代码
//mui初始化
mui.init();
//页面切换功能
//声明数组存放页面地址
var subpages = ['main-promotion.html', 'main-merchandise.html', 'main-car.html', 'main-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');
} });
前端小菜鸟
同上，请问解决了吗？
2018-11-20 15:52