目錄

• 微信小程序導航條配置圖片背景
  • 全部頁面替換
  • 就首頁特殊，其他頁面純色導航條（沿用微信那套）
    • 相關代碼

微信小程序導航條配置圖片背景

需要實現通欄背景的效果（導航那里還有背景圖片）

全部頁面替換

如果自定義導航欄，會存在需要考慮的問題

• 如果有上一頁，就返回上一頁，否則直接返回首頁（首頁），圖標也要跟着換

• 標題取配置里的（如果可以的話，否則就用組件傳參，去掉配置里的，以免造成誤解）

  • 背景圖片拼接（首頁的時候）

就首頁特殊，其他頁面純色導航條（沿用微信那套）

網上搜索的方案是自定義導航欄，都是在全局設置了 navigationStyle 這一屬性，但總感覺太復雜了，需要考慮前面記下的一些處理細節，想着再看看有沒有其他簡便點的方案

觀察了幾個小程序，發現在 Android 下，標題居左， iOS 下，標題居中

• 這和微信原生導航表現一致，故推測參考小程序的做法是首頁做了特殊處理，其他頁面沿用微信的
• 這感覺就很像是微信小程序的配置，那就去官方文檔找找看頁面配置里有沒有 navigationStyle 配置項，果不其然，有
  • 那我就首頁配置一下，不要導航，自己設置頂部背景，其他頁面不管，用默認的導航，不就實現了我想要的效果了嗎？
    

相關代碼

index.json

• 這樣設置后，index 頁面原來微信的導航欄就會消失了，自己通過調整頁面布局實現效果

{
  "usingComponents": {},
  "navigationStyle": "custom" // 關鍵點
}

index.wxml

<view class="pageContainer">
    <!-- 背景（安全起見圖片地址打碼處理了） -->
    <image class="navBg" mode="widthFix" src="https://www.xxxx.com/background.png"></image>

    <!-- 第一個頁面元素（圖中視頻） -->
    <view class="videoBanner">
        <video src="{{videoUrl}}" show-center-play-btn enable-progress-gesture show-mute-btn auto-pause-if-navigate
               auto-pause-if-open-native title="金東區宣傳視頻--和美金東" class="inner_video" poster="{{videoPosterUrl}}"></video>
        <!-- 其他頁面內容 -->
    </view>
</view>

index.wxss

.navBg {
  width: 100%;
  position: absolute; /* 使用 z-index 調整上下層級需要脫離文檔流 */
  top: 0;
  z-index: -100; /* z-index 設低一點，讓頁面元素可以覆蓋它 */
}

.videoBanner {
  padding: 20rpx 25rpx 0 25rpx;
  margin-top: 295rpx; /* 有一點疊加在圖片上面 => 295 + 20 = 315rpx（背景圖片 750*371 的比例，即有 371 - 315 = 56rpx 的重疊）*/
}

存在一個小問題：首頁比較長，要滾動時，微信自帶的“膠囊”會一直在頁面的右上角，跟隨頁面移動，可能會有點丑