mui實現底部凸起按鈕的實現

DevTalking 發布于2019-08-21 11:24 / 3263人閱讀

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

最近在看其他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實現按鈕點擊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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