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

DevTalking 发布于2019-08-21 11:24 / 3244人阅读

摘要：最近在看其他的时候，突然想到了在中自己实现一个底部凸起按钮的效果。来实现底部切换始终处于上层的效果。最后附上本人的圆形按钮代码和实现效果图。

最近在看其他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：

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

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

云服务器 GPU云服务器底部菜单实现 html实现页面底部 html实现透明按钮 js实现按钮点击

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86665.html

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

摘要：最近在看其他的时候，突然想到了在中自己实现一个底部凸起按钮的效果。来实现底部切换始终处于上层的效果。最后附上本人的圆形按钮代码和实现效果图。最近在看其他app的时候，突然想到了在mui中自己实现一个底部凸起按钮的效果。大致想要实现的样子如图（来自闲鱼app的主界面）：showImg(https://segmentfault.com/img/bVHqdd?w=276&h=122); 话...

BlackMass 2019-08-30 13:17 评论0 收藏0
VUE实例图解

摘要：案例品牌列表构建基本结构利用的样式数据要双向更新，所以要用到，同时在后面的中要进行初始化为添加按钮绑定事件的中，绑定值为关键字删除标签绑定函数，传入参数的时候，需要用括号事件修饰符，表示阻止默认事件实例对象新建一个实例函数中初始化需要双向 VUE案例品牌列表构建基本结构利用bootstrap的样式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 评论0 收藏0
MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

摘要：三底部选项卡切换页面底部选项卡的切换，可以说是的标志之一。两种模式的显示效果差不多，如下图可见两种模式的区别顾名思义，模式是将所有子页面的内容，分别放置到主页不同的中，当我们点击主页的不同选项卡时，切换不同的显示。概述 JRedu 　　在上一篇博客中，我们学习了如何使用Hbuilder创建一个APP，同时如何使用MUI搭建属于自己的第一款APP，没有学习的同学可以戳链接学习： http...

番茄西红柿 2019-04-23 13:37 评论0 收藏0
PyQt5, PushButton

摘要：创建如果不需要字符串可以省略，或者设置为在按钮顶部显示的文本。信号一个按钮的常用功能就是用户的点击，并执行相关的操作。这个方法的实现是通过按钮单击发出信号连接的相对的方法来完成的例子 showImg(https://segmentfault.com/img/bVbe30X?w=4000&h=1936); 简介操作按钮通常用于让用户只需按下按钮就可以执行某些操作，比如下载或者删除文件。...

Charlie_Jade 2019-07-30 17:20 评论0 收藏0