mui实现底部凸起按钮的实现

"); </div> 最近在看其他app的时候，突然想到了在mui中自己实现一个底部凸起按钮的效果。
大致想要实现的样子如图（来自闲鱼app的主界面）：



话说要怎么实现这个结构呢，对于使用过mui的朋友来说，底层都是h5+的
webview页面搭建出整体的app的。

参考各路大神的文章和对webview的解读后，我们就可以知道利用官方例子的
上下导航来实现是无法做到的。这是由于几个问题

webview页面无法做到特定形状的构建（这是废话...）
如果上下导航处于同一层级，下层的子页面只会遮挡住圆形按钮的多余部分，或是无法覆盖到圆形两侧而形成空白。
所以，对于这个问题我们将官方的例子的导航父页面拆开处理。
上边的导航栏用作构建底部切换状态栏和中间子页面的父页面。
而这样底部的切换就和要显示的子页面处于同一层级，我们就可以利用
h5+文档之中WebviewStyles的

zindex: (Number 类型 ) 窗口的堆叠顺序值拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面，拥有相同堆叠顺序的窗口后调用show方法则在前面。
来实现底部切换始终处于上层的效果。
剩下我们只需要解决页面的透明问题就可以了，利用文档之中WebviewStyles的参数。

background: (String 类型 )窗口的背景颜色
窗口空白区域的背景模式，设置background为颜色值(参考CSS Color
Names，可取值/十六进制值/rgb值/rgba值)，窗口为独占模式显示（占整个屏幕区域）；
设置background为“transparent”，则表示窗口背景透明，为非独占模式。

1. var bottom_style = { 
2.                 height: "83px", 
3.                 bottom: "0px", 
4.                 scrollIndicator: "none", 
5.                 background: "transparent", 
6.                 zindex: 998 
7.                 } 

当然在这之后一定不要忘记给底部导航加上的body加上背景透明的css。

body {
      background: transparent;
     }
最后根据你的业务在底部切换的子页面处理逻辑并利用fire事件回传给父页面进行显示处理就大功告成了。

最后附上本人的圆形按钮代码和实现效果图。css：

 

1. .circle { 
2.                 position: fixed; 
3.                 text-align: center; 
4.                 margin-left: calc((20% - 65px)/2); 
5.                 bottom: 18px; 
6.                 width: 65px; 
7.                 height: 65px; 
8.                 border-radius: 50px; 
9.                 background: rgba(100, 177, 245, 0.8); 
10.                 z-index: 99; 
11.         } 
12. .tab-center { 
13.                 display: table-cell; 
14.                 overflow: hidden; 
15.                 width: 1%; 
16.                 height: 50px; 
17.                 text-align: center; 
18.                 vertical-align: middle; 
19.             } 

html：

1. <div id="xxx.html" class="tab-center"> 
2.     <div class="circle">