国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

BlackMass / 2681人閱讀

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

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

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

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

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

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

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

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

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

background: (String 類型 )窗口的背景顏色
窗口空白區(qū)域的背景模式，設(shè)置background為顏色值(參考CSS Color
Names，可取值/十六進制值/rgb值/rgba值)，窗口為獨占模式顯示（占整個屏幕區(qū)域）；
設(shè)置background為“transparent”，則表示窗口背景透明，為非獨占模式。
var bottom_style = {
                height: "83px",
                bottom: "0px",
                scrollIndicator: "none",
                background: "transparent",
                zindex: 998
                }

當然在這之后一定不要忘記給底部導航加上的body加上背景透明的css。

body {
      background: transparent;
     }

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

最后附上本人的圓形按鈕代碼和實現(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)典系列文章

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115445.html

相關(guān)文章

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

    摘要：最近在看其他的時候，突然想到了在中自己實現(xiàn)一個底部凸起按鈕的效果。來實現(xiàn)底部切換始終處于上層的效果。最后附上本人的圓形按鈕代碼和實現(xiàn)效果圖。 最近在看其他app的時候，突然想到了在mui中自己實現(xiàn)一個底部凸起按鈕的效果。大致想要實現(xiàn)的樣子如圖（來自閑魚app的主界面）：showImg(https://segmentfault.com/img/bVHqdd?w=276&h=122); 話...

    DevTalking 評論0 收藏0

  • VUE實例圖解

    摘要：案例品牌列表構(gòu)建基本結(jié)構(gòu)利用的樣式數(shù)據(jù)要雙向更新，所以要用到，同時在后面的中要進行初始化為添加按鈕綁定事件的中，綁定值為關(guān)鍵字刪除標簽綁定函數(shù)，傳入?yún)?shù)的時候，需要用括號事件修飾符，表示阻止默認事件實例對象新建一個實例函數(shù)中初始化需要雙向 VUE案例 品牌列表 構(gòu)建基本結(jié)構(gòu) 利用bootstrap的樣式 showImg(https://segmentfault.com/img/bVbf...

    wqj97 評論0 收藏0

  • MUI框架開發(fā)HTML5手機APP(二)--頁面跳轉(zhuǎn)傳值&底部選項卡切換

    摘要：三底部選項卡切換頁面底部選項卡的切換，可以說是的標志之一。兩種模式的顯示效果差不多，如下圖可見兩種模式的區(qū)別顧名思義，模式是將所有子頁面的內(nèi)容，分別放置到主頁不同的中，當我們點擊主頁的不同選項卡時，切換不同的顯示。 概 述 JRedu 　　在上一篇博客中，我們學習了如何使用Hbuilder創(chuàng)建一個APP，同時如何使用MUI搭建屬于自己的第一款APP，沒有學習的同學可以戳鏈接學習： http...

    番茄西紅柿 評論0 收藏0

  • PyQt5, PushButton

    摘要：創(chuàng)建如果不需要字符串可以省略，或者設(shè)置為在按鈕頂部顯示的文本。信號一個按鈕的常用功能就是用戶的點擊，并執(zhí)行相關(guān)的操作。這個方法的實現(xiàn)是通過按鈕單擊發(fā)出信號連接的相對的方法來完成的例子 showImg(https://segmentfault.com/img/bVbe30X?w=4000&h=1936); 簡介 操作按鈕通常用于讓用戶只需按下按鈕就可以執(zhí)行某些操作，比如下載或者刪除文件。...

    Charlie_Jade 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<