微信圖片_20190521160503.png
manifest.json →plus →launchwebview→subNViews
"subNViews"： [
{
"id": "tabBar",
"styles": {
"bottom": "0px",
"left": "0",
"height": "50px",
"width": "100%",
"backgroundColor": "#fff"
},
"tags": [
{
"tag": "font",
"id": "indexIcon",
"text": "\ue500",
"position": {
"top": "4px",
"left": "0",
"width": "33%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/mui.ttf",
"align": "center",
"size": "26px"
}
}, {
"tag": "font",
"id": "indexText",
"text": "平臺",
"position": {
"top": "23px",
"left": "0",
"width": "33%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "12px"
}
},{
"tag": "font",
"id": "newsIcon",
"text": "\ue202",
"position": {
"top": "4px",
"left": "33%",
"width": "33%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/mui.ttf",
"align": "center",
"size": "26px"
}
}, {
"tag": "font",
"id": "newsText",
"text": "本地",
"position": {
"top": "23px",
"left": "33%",
"width": "33%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "12px"
}
},
{
"tag": "font",
"id": "contacIcon",
"text": "\ue100",
"position": {
"top": "4px",
"left": "66%",
"width": "34%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/mui.ttf",
"align": "center",
"size": "20px"
}
}, {
"tag": "font",
"id": "contactText",
"text": "我的",
"position": {
"top": "24px",
"left": "66%",
"width": "34%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "12px"
}
},
{
"tag": "rect",
"id": "tabBorder",
"position": {
"top": "0",
"left": "0",
"width": "100%",
"height": "1px"
},
"rectStyles": {
"color": "#ccc"
}
}
]
}
]
util.js
var util = {
options: {
ACTIVE_COLOR: "#007aff",
NORMAL_COLOR: "#000",
subpages: ["html/home/home.html",
"html/msg/home.html",
"html/my/login.html"]
},
toggleNview: function(currIndex) {
currIndex = currIndex * 2;
// 重繪當前tag 包括icon和text，所以執(zhí)行兩個重繪操作
util.updateSubNView(currIndex, util.options.ACTIVE_COLOR);
util.updateSubNView(currIndex + 1, util.options.ACTIVE_COLOR);
// 重繪兄弟tag 反之排除當前點擊的icon和text
for(var i = 0; i < 6; i++) {
if(i !== currIndex && i !== currIndex + 1) {
util.updateSubNView(i, util.options.NORMAL_COLOR);
}
}
},
}
index.js
* 根據(jù)判斷view控件點擊位置判斷切換的tab
*/
nview.addEventListener('click', function(e) {
var clientX = e.clientX;
if(clientX > 0 && clientX <= parseInt(pageW * 0.33)) {
currIndex = 0;
} else if(clientX > parseInt(pageW * 0.33) && clientX <= parseInt(pageW * 0.66)) {
currIndex = 1;
} else {
currIndex = 2;
}
//console.log(currIndex);
// 匹配對應tab窗口
if(currIndex > -1) {
targetPage = plus.webview.getWebviewById(subpages[currIndex]);
}
if(targetPage == activePage) {
return;
}
//底部選項卡切換
util.toggleNview(currIndex);
// 子頁面切換
util.changeSubpage(targetPage, activePage, aniShow);
//更新當前活躍的頁面
activePage = targetPage;
});