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

最近在看其余app的时候，忽然想到了在mui中本身实现一个底部凸起按钮的效果。
大体想要实现的样子如图（来自闲鱼app的主界面）：

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

参考各路大神的文章和对webview的解读后，咱们就能够知道利用官方例子的
上下导航来实现是没法作到的。这是因为几个问题

1. webview页面没法作到特定形状的构建（这是废话...）

2. 若是上下导航处于同一层级，下层的子页面只会遮挡住圆形按钮的多余部分，
   或是没法覆盖到圆形两侧而造成空白。

---

因此，对于这个问题咱们将官方的例子的导航父页面拆开处理。
上边的导航栏用做构建底部切换状态栏和中间子页面的父页面。
而这样底部的切换就和要显示的子页面处于同一层级，咱们就能够利用
h5+文档之中WebviewStyles的

zindex: (Number 类型 ) 窗口的堆叠顺序值
拥有更高堆叠顺序的窗口老是会处于堆叠顺序较低的窗口的前面，拥有相同堆叠顺序的窗口后调用show方法则在前面。

来实现底部切换始终处于上层的效果。
剩下咱们只须要解决页面的透明问题就能够了，利用文档之中WebviewStyles的参数。

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

var bottom_style = {
                height: "83px",
                bottom: "0px",
                scrollIndicator: "none",
                background: "transparent",
                zindex: 998
                }

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

body {
      background: transparent;
     }

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

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

.circle {
                position: fixed;
                text-align: center;
                margin-left: calc((20% - 65px)/2);
                bottom: 18px;
                width: 65px;
                height: 65px;
                border-radius: 50px;
                background: rgba(100, 177, 245, 0.8);
                z-index: 99;
        }
.tab-center {
                display: table-cell;
                overflow: hidden;
                width: 1%;
                height: 50px;
                text-align: center;
                vertical-align: middle;
            }

html：

<div id="xxx.html" class="tab-center">
    <div class="circle">
        <span class="mui-icon-extra mui-icon-extra-sweep"></span>
    </div>
</div>

若有问题，欢迎各路大神指正。

一部分思路参考了小青年的mui经典系列文章