mui實(shí)現(xiàn)底部凸起按鈕的實(shí)現(xiàn)

BlackMass 發(fā)布于2019-08-30 13:17 / 2698人閱讀

摘要：最近在看其他的時(shí)候，突然想到了在中自己實(shí)現(xiàn)一個(gè)底部凸起按鈕的效果。來實(shí)現(xiàn)底部切換始終處于上層的效果。最后附上本人的圓形按鈕代碼和實(shí)現(xiàn)效果圖。

最近在看其他app的時(shí)候，突然想到了在mui中自己實(shí)現(xiàn)一個(gè)底部凸起按鈕的效果。
大致想要實(shí)現(xiàn)的樣子如圖（來自閑魚app的主界面）：

話說要怎么實(shí)現(xiàn)這個(gè)結(jié)構(gòu)呢，對(duì)于使用過mui的朋友來說，底層都是h5+的
webview頁面搭建出整體的app的。

參考各路大神的文章和對(duì)webview的解讀后，我們就可以知道利用官方例子的
上下導(dǎo)航來實(shí)現(xiàn)是無法做到的。這是由于幾個(gè)問題

webview頁面無法做到特定形狀的構(gòu)建（這是廢話...）

如果上下導(dǎo)航處于同一層級(jí)，下層的子頁面只會(huì)遮擋住圓形按鈕的多余部分，
或是無法覆蓋到圓形兩側(cè)而形成空白。

所以，對(duì)于這個(gè)問題我們將官方的例子的導(dǎo)航父頁面拆開處理。
上邊的導(dǎo)航欄用作構(gòu)建底部切換狀態(tài)欄和中間子頁面的父頁面。
而這樣底部的切換就和要顯示的子頁面處于同一層級(jí)，我們就可以利用
h5+文檔之中WebviewStyles的

zindex: (Number 類型 ) 窗口的堆疊順序值
擁有更高堆疊順序的窗口總是會(huì)處于堆疊順序較低的窗口的前面，擁有相同堆疊順序的窗口后調(diào)用show方法則在前面。

來實(shí)現(xiàn)底部切換始終處于上層的效果。
剩下我們只需要解決頁面的透明問題就可以了，利用文檔之中WebviewStyles的參數(shù)。

background: (String 類型 )窗口的背景顏色
窗口空白區(qū)域的背景模式，設(shè)置background為顏色值(參考CSS Color
Names，可取值/十六進(jìn)制值/rgb值/rgba值)，窗口為獨(dú)占模式顯示（占整個(gè)屏幕區(qū)域）；
設(shè)置background為“transparent”，則表示窗口背景透明，為非獨(dú)占模式。

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

當(dāng)然在這之后一定不要忘記給底部導(dǎo)航加上的body加上背景透明的css。

body {
      background: transparent;
     }

最后根據(jù)你的業(yè)務(wù)在底部切換的子頁面處理邏輯并利用fire事件回傳給父頁面進(jìn)行顯示處理就大功告成了。

最后附上本人的圓形按鈕代碼和實(shí)現(xiàn)效果圖。
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：

如有問題，歡迎各路大神指正。

一部分思路參考了小青年的mui經(jīng)典系列文章