例項內容

• 導航欄樣式設定
• tabBar導航欄

例項一：導航欄樣式設定

小程式的導航欄樣式在app.json中定義。

這裡設定導航，背景黑色，文字白色，文字內容測試小程式

app.json內容：

{
  "pages":[
    "pages/index/index",
    "pages/login/login",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"red",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "測試小程式",
    "navigationBarTextStyle"
 
:"#fff"
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

window中的樣式說明：

效果：

例項二：tabBar導航欄

tabBar挺好的，可以放置於頂部或者底部，用於不同功能頁面的切換。

tabBar同樣在app.json中進行定義，看一下我在app.json中對tabBar的相關定義：

  "tabBar": {
    "selectedColor": "#1296db",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "images/ico-home.png",
      "selectedIconPath"
 
: "images/ico-home-d.png"
    },{
      "pagePath": "pages/setting/setting",
      "text": "設定",
      "iconPath": "images/ico-setting.png",
      "selectedIconPath": "images/ico-setting-d.png"
    },{
      "pagePath": "pages/help/help",
      "text": "幫助",
      "iconPath": "images/ico-help.png",
      "selectedIconPath": "images/ico-help-d.png"
    }]
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

效果：

tabBar相關屬性定義說明：

tabBar list定義說明：

tabBar 是一個數組，只能配置最少2個、最多5個 tab，tab 按陣列的順序排序。

轉載：https://blog.csdn.net/lecepin/article/details/54380814