在使用Uni框架開發(fā)APP、小程式中，由於原生導(dǎo)覽列和狀態(tài)列是屬於原生框架渲染，其層級(jí)會(huì)高於所有內(nèi)容區(qū)域，包括DCloud提供的自訂彈窗元件也無法實(shí)現(xiàn)覆蓋原生導(dǎo)覽列的目的，翻閱技術(shù)資料，有不少開發(fā)者說可以使用nvue的方式來實(shí)現(xiàn)這個(gè)效果，但是感覺實(shí)現(xiàn)過程過於繁雜，而且兼容性並不是很好。

那有什麼簡單的方式可以實(shí)現(xiàn)覆蓋原生導(dǎo)覽列的效果呢？答案是有的，要不然我也不會(huì)寫這篇文章來浪費(fèi)大家的寶貴時(shí)間了，對(duì)吧。著急的讀者可以先看圖，我給的圖已經(jīng)實(shí)現(xiàn)了這個(gè)效果。

首先我們要知道，透過CSS方式設(shè)定層級(jí)（z-index）的值是無法達(dá)到目的的，即使是設(shè)定為1000000或更大，也沒有作用（發(fā)佈為H5端的除外）。這個(gè)是由於Uni框架的頁面渲染邏輯所形成的。

// 設(shè)置多大都無效
.popup { z-index: 1000000 }

有些技術(shù)可能會(huì)這樣做：把導(dǎo)覽列和狀態(tài)列都改為自訂，不使用原生的方式，這樣不就解決了層級(jí)問題了嗎，是的沒錯(cuò)，這樣是可以解決問題了，但是我們?cè)陂_發(fā)的時(shí)候都知道，原生導(dǎo)覽列和狀態(tài)列不管是在渲染效果和各終端相容性上都是非原生無法比及的。另外使用非原生的方式也不在本文討論的範(fàn)疇。

我這裡要跟大家介紹一個(gè)方法，而且還非常簡單，既然我們無法透過彈窗元件來覆蓋原生導(dǎo)覽欄，那麼可以把彈窗做成一個(gè)頁面，另外再把頁面渲染成彈窗效果，我們都知道，跳到新的頁面是可以覆蓋掉原生導(dǎo)覽列和狀態(tài)列的，但是跳到新的頁面效果不好，所以我們做的就是把這個(gè)頁面做成彈窗的形式，讓用戶感覺不到是跳到了新的頁面，就像在當(dāng)前頁面彈出一樣（例如我們常見的在商品詳情頁領(lǐng)優(yōu)惠券功能）。

下面我們就以領(lǐng)取優(yōu)惠券功能為例，顯示優(yōu)惠券的頁面例如路徑為：pages/popup/coupon.vue 我們?cè)趐ages.json檔案中如下配置：

{
  "path": "pages/popup/coupon",
    "style": {
      "navigationStyle": "custom",
      "navigationBarTextStyle": "white",
         "app-plus": {
           "animationType": "fade-in",
           "background": "transparent",
           "backgroundColor": "transparent",
           "popGesture": "none" // 關(guān)閉IOS屏幕左邊滑動(dòng)關(guān)閉當(dāng)前頁面的功能
        }
    }
}

然後我們?cè)谛枰獜棾鲱I(lǐng)券頁面vue檔案寫（注意使用open-type="navigate"的方式）：

<navigator url="/pages/popup/coupon" hover-class="none">領(lǐng)券</navigator>

僅僅以上兩個(gè)步驟，就完成了自訂彈跳窗覆蓋原生導(dǎo)航列和狀態(tài)列的效果，並且相容於APP和小程序，在H5端會(huì)差點(diǎn)不過也能接受，如果希望更好的效果建議使用上面介紹的設(shè)定層級(jí)的方法。

有部分使用者回饋這種方式不好互動(dòng)傳值，其實(shí)這個(gè)並不是問題，也有解決方案，我們可以採用 uni.setStorageSync 或直接頁面?zhèn)鲄⒌姆绞蕉际强梢缘摹?

需要uni原始碼的可以到Dcloud外掛程式市場下載，完全免費(fèi)：可覆蓋原生導(dǎo)覽列和狀態(tài)列的彈窗效果

以上是Uniapp開發(fā)中自訂彈窗如何覆寫原生導(dǎo)覽列和狀態(tài)列的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！