• 作者:開發GG
  • 類別:企業blog
  • 時間:2019/07/19
navigationStyle String default 導航欄樣式,僅支持 default/custom。custom 模式可自定義導航欄,只保留右上角膠囊狀的按鈕 微信版本 6.6.0
左 默認   右 自定義

以上為微信小程序開發文檔

關于標題欄自定義:支持全屏顯示小程序

    除了 App 喚起功能之外,在今年的微信公開課上承諾的「標題欄自定義」能力,這次也正式對外開放了。
    在此之前,小程序開發者只能對小程序標題欄進行顏色、標題文字方面的調整。
    新能力開放后,開發者可以對小程序除右上角膠囊菜單欄外所有頁面進行控制。這下,開發者可以開發全屏小程序,進一步提升用戶體驗。
 

  

值得注意的是,window.navigationStyle 只能支持 6.6.0 以上微信版本,對應基礎庫版本為 1.9.1。如果需要針對低版本微信進行兼容,記得做好兼容性測試。
那么到底可以自定義哪些呢

   

"navigationStyle":"default"

//導航欄樣式,僅支持 default/custom。custom 模式可自定義導航欄,只保留右上角膠囊狀的按鈕.

"window":

{

"navigationBarTitleText":"小程序商城",

"navigationBarTextStyle":"black",

"navigationBarBackgroundColor":"#aa154e",

"enablePullDownRefresh":true,

"backgroundColor":"#aa154e",

"backgroundTextStyle":"dark",

"onReachBottomDistance":15,

"navigationStyle":"custom"

},
——————————————————————————
常見問題
1.請確認微信版本在6.6.0以上,以及公共庫版本在1.9.1以上。
2.這里的custom的意思,是指需要開發者自行設計定義頂欄的樣式。另外,系統的標題欄是無法隱藏的,只能隱藏微信小程序本身的navigationBar。
3.這里“自定義”的意思,是指開發者需要用wxml和wxss來實現頂欄(或者不實現,通過margin或position等樣式留出空白)
4.目前需要在web-view里的網頁自行做navigation bar
5.
navigationStyle設置為custom屬性時,默認導航沒有了,但是如果頁面內容頭部我需要fixed固定,那么內容的層級就默認比下拉刷新的按鈕層級高了,刷新點點點的不現實了。后續官方更新中,將下拉刷新調高等級(2018.04.03)
6.
tabar 是用原生控件的實現的,所以無法設置樣式
7.
tabar 是用原生控件的實現的,所以無法設置樣式
8.
當使用自定義導航條navigationStyle: 'custom',并且頁面使用了<input>標簽時,鍵盤彈出隱藏后,系統右上角“膠囊按鈕”位置出現偏離(BUG,在iphoneX和小屏幕上可能會出現)建議通過getSystemInfo會返回一個statusBarHeight,可以用這個來兼容
9.支持單個頁面設置 navigation style(2018年12月21日 更新微信7.0.0版本支持)
10.右上角的膠囊不能修改顏色(目前)

通比牛牛手机版