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('弹了个皮卡丘！');
		})
	})

希望对你有帮助，觉得很棒的可以给个star哦~
https://github.com/lbm526/mui_webApp