网上的教程五花八门,而且超级多都是不行的,有些可以的又会覆盖整个窗体,后来看到new plus.nativeObj.View可以实现。
先上个最终效果图:
这样很帅,有没有?
实现
具体可以参考我的源码,源码地址:https://github.com/lbm526/mui_webApp
凸起部分的代码:
使用原生api:new plus.nativeObj.View
按钮的位置,样式什么的自己慢慢调到合适为止
// 凸起按钮
mui.plusReady(function () {
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 = new plus.nativeObj.View('icon', {
bottom: '4px',
left: leftPos + 'px',
width: '60px',
height: '70px'
}, [{
tag: 'rect',
id: 'bg',
position: {
top: '1px',
left: '0px',
width: '100%',
height: '100%'
},
rectStyles: {
color: '#fff',
radius: '50%',
borderColor: '#DD524D',
borderWidth: '1px'
}
}, {
tag: 'rect',
id: 'bg2',
position: {
bottom: '0px',
left: '0px',
width: '100%',
height: '45px'
},
rectStyles: {
color: '#fff'
}
}, {
tag: 'rect',
id: 'iconBg',
position: {
top: '6px',
left: '5px',
width: '50px',
height: '50px'
},
rectStyles: {
color: '#d74b28',
radius: '50%'
}
}, {
tag: 'font',
id: 'icon',
text: '+', //此为字体图标Unicode码'\e600'转换为'\ue600'
position: {
top: '-5px',
left: '5px',
width: '50px',
height: '100%'
},
textStyles: {
// fontSrc: '_www/fonts/iconfont.ttf',
align: 'center',
color: '#fff',
size: '30px'
}
}]);
// append 到父webview中
self.append(drawNativeIcon);
// 事件监听
drawNativeIcon.addEventListener('click',function(){
alert('弹了个皮卡丘!');
})
})
希望对你有帮助,觉得很棒的可以给个star哦~
https://github.com/lbm526/mui_webApp