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

最近在看其他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”，则表示窗口背景透明，为非独占模式。

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

猜你喜欢