mui实现底部导航栏凸起按钮--简单实现

本文主要是介绍mui实现底部导航栏凸起按钮--简单实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

网上的教程五花八门，而且超级多都是不行的，有些可以的又会覆盖整个窗体，后来看到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('弹了个皮卡丘！');})})