function() {
mui.init({
swipeBack: true //启用右滑关闭功能
});
mui.plusReady(function() {
plus.key.addEventListener('backbutton',function(){
nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
},false);
var self = plus.webview.currentWebview(),
leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中
/**
* drawNativeIcon 绘制凸起圆,
* 实现原理:
* id为bg的tag 创建带边框的圆
* id为bg2的tag 创建白色矩形遮住圆下半部分,只显示凸起带边框部分
* id为iconBg的红色背景图
* id为icon的字体图标
* 注意创建先后顺序,创建越晚的层级越高
*/
var drawNativeIcon = util.drawNative('icon', {
bottom: '5px',
left: leftPos + 'px',
width: '60px',
height: '60px'
}, [{
tag: 'rect',
id: 'bg',
position: {
top: '1px',
left: '0px',
width: '100%',
height: '100%'
},
rectStyles: {
color: '#fff',
radius: '50%',
borderColor: '#ccc',
borderWidth: '1px'
}
}, {
tag: 'rect',
id: 'bg2',
position: {
bottom: '-0.5px',
left: '0px',
width: '100%',
height: '45px'
},
rectStyles: {
color: '#fff'
}
}, {
tag: 'rect',
id: 'iconBg',
text:'出行',
position: {
top: '5px',
left: '5px',
width: '50px',
height: '50px'
},
rectStyles: {
color: '#248DC4',
radius: '50%',
}
}, {
tag: 'font',
id: 'icon',
text: '\ue6c2', //此为字体图标Unicode码'\e600'转换为'\ue600'
position: {
top: '0px',
left: '5px',
width: '50px',
height: '100%'
},
textStyles: {
fontSrc: '../commom/fonts/iconfont.ttf',
align: 'center',
color: '#fff',
size: '30px'
}
}
]);
// 将绘制的凸起 append 到父webview中
self.append(drawNativeIcon);
//凸起圆的点击事件
var active_color = '#fff';
drawNativeIcon.addEventListener('click', function(e) {
mui.openWindow({
id:'meter',
url:'meter.html'
})
if(active_color == '#fff'){
drawNativeIcon.drawText('\ue6c2', {}, {
fontSrc: '../commom/fonts/iconfont.ttf',
align: 'center',
color: '#000',
size: '30px'
}, 'icon');
active_color = '#000';
} else {
drawNativeIcon.drawText('\ue6c2', {}, {
fontSrc: '../commom/fonts/iconfont.ttf',
align: 'center',
color: '#fff',
size: '30px'
}, 'icon');
active_color = '#fff';
}
// 重绘字体颜色
});
// 中间凸起图标绘制及监听点击 完毕
// 创建子webview窗口 并初始化
var aniShow = {};
util.initSubpage(aniShow);
//初始化相关参数
var nview = plus.nativeObj.View.getViewById('tabBar'),
activePage = plus.webview.currentWebview(),
targetPage,
subpages = util.options.subpages,
pageW = window.innerWidth,
currIndex = 0;
/**
* 根据判断view控件点击位置判断切换的tab
*/
nview.addEventListener('click', function(e) {
var clientX = e.clientX;
if(clientX >= 0 && clientX <= parseInt(pageW * 0.25)) {
currIndex = 0;
} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
currIndex = 1;
} else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
currIndex = 2;
} else {
currIndex = 3;
}
// 匹配对应tab窗口
if(plus.webview.getWebviewById(subpages[currIndex].id)==plus.webview.currentWebview()){
return;
}else{
targetPage=plus.webview.getWebviewById(subpages[currIndex].id);
}
//底部选项卡切换
util.toggleNview(currIndex);
util.changeSubpage(targetPage,activePage,aniShow);
activePage=targetPage;
});
});
})();
我在底部绘制绘制这个凸起按钮。然后不在mainfest.json里配置其它的导航按钮,应该怎么弄???我创建一个新的webview但是显示不出来 只有这个凸起按钮
0 个回复