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經典系列文章