微信小程序自定義頂部導航欄(兼容適配所有機型)

在微信小程序中,自定義導航欄的顏色 可以在app.json.  window裏面添加navigationBarBackgroundColor屬性。

但是顏色只能爲十六進制顏色碼,不能使用rgb,或者rgba.。

爲了滿足更多用戶的需求,微信官方給出了一個navigationStyle屬性

官方文檔:navigationStyle 導航欄樣式,僅支持 default/custom。custom  模式可自定義導航欄,只保留右上角膠囊狀的按鈕)。

app.json window 增加 navigationStyle:custom ,頂部導航欄就會消失,保留右上角膠囊狀的按鈕,如下圖所示。

 

Q:如果改變膠囊體顏色?

A:膠囊體目前只支持黑色和白色兩種顏色 在app.josn window 加上 "navigationBarTextStyle":"white/black"

 

注:如果自定義導航欄,頁面自帶的返回按鈕也會消失,需要用代碼編寫!!!!

Q:如何兼容適配所有機型,包括劉海屏?

A:使用 wx.getSystemInfoSync()['statusBarHeight'] 則能獲取到頂部狀態欄的高度,單位爲px.

簡單示例:

在app.js裏面
App({
    globalData: {
      statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']
    }
})
WXML 自定義頂部狀態欄div結構
<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
  <text>demo</text>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>
app.css 全局css中設置樣式
.custom{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  background: #2C5CFF;
  z-index: 999;
}
.custom text{
  color: #fff;
  font-size: 34rpx;
  font-weight: 500;
  max-width: 280rpx;
}
.empty_custom{
  height: 45px;
  width: 100%;
}
在index.js中取出statusBarHeight值
Page({
    data:{
        statusBarHeight: app.globalData.statusBarHeight
    }
})

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章