var util = { options: { ACTIVE_COLOR: "#007aff", NORMAL_COLOR: "#000", subpages: ["html/tab-webview-subpage-chat.html", "html/tab-webview-subpage-contact.html"] }, /** * 简单封装了绘制原生view控件的方法 * 绘制内容支持font(文本,字体图标),图片img , 矩形区域rect */ drawNative: function(id, styles, tags) { var view = new plus.nativeObj.View(id, styles, tags); return view; }, /** * 初始化首个tab窗口 和 创建子webview窗口 */ initSubpage: function(aniShow) { var subpage_style = { top: 0, bottom: 51 }, subpages = util.options.subpages, self = plus.webview.currentWebview(), temp = {}; //兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容 if(mui.os.android) { if(plus.navigator.isImmersedStatusbar()) { subpage_style.top += plus.navigator.getStatusbarHeight(); } if(self.getTitleNView()) { subpage_style.top += 40; } } // 初始化第一个tab项为首次显示 temp[self.id] = "true"; mui.extend(aniShow, temp); // 初始化绘制首个tab按钮 util.toggleNview(0); for(var i = 0, len = subpages.length; i < len; i++) { if(!plus.webview.getWebviewById(subpages[i])) { var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); // append到当前父webview self.append(sub); // 初始化隐藏 sub.hide(); } } }, /** * 点击切换tab窗口 */ changeSubpage: function(targetPage, activePage, aniShow) { //若为iOS平台或非首次显示,则直接显示 if(mui.os.ios || aniShow[targetPage]) { plus.webview.show(targetPage); } else { //否则,使用fade-in动画,且保存变量 var temp = {}; temp[targetPage] = "true"; mui.extend(aniShow, temp); plus.webview.show(targetPage, "fade-in", 300); } //隐藏当前 除了第一个父窗口 if(activePage !== plus.webview.getLaunchWebview()) { plus.webview.hide(activePage); } }, /** * 点击重绘底部tab (view控件) */ toggleNview: function(currIndex) { currIndex = currIndex * 2; // 重绘当前tag 包括icon和text,所以执行两个重绘操作 util.updateSubNView(currIndex, util.options.ACTIVE_COLOR); util.updateSubNView(currIndex + 1, util.options.ACTIVE_COLOR); // 重绘兄弟tag 反之排除当前点击的icon和text for(var i = 0; i < 8; i++) { if(i !== currIndex && i !== currIndex + 1) { util.updateSubNView(i, util.options.NORMAL_COLOR); } } }, /* * 改变颜色 */ changeColor: function(obj, color) { obj.color = color; return obj; }, /* * 利用 plus.nativeObj.View 提供的 drawText 方法更新 view 控件 */ updateSubNView: function(currIndex, color) { var self = plus.webview.currentWebview(), nviewEvent = plus.nativeObj.View.getViewById("tabBar"), // 获取nview控件对象 nviewObj = self.getStyle().subNViews[0], // 获取nview对象的属性 currTag = nviewObj.tags[currIndex]; // 获取当前需重绘的tag nviewEvent.drawText(currTag.text, currTag.position, util.changeColor(currTag.textStyles, color), currTag.id); } };