頂部導航欄

1. 設定導航欄文字

在相應介面的json中加入屬性值：

"navigationBarTitleText":"自定義文字",
"navigationBarTextStyle":"white"

2. 設定導航欄顏色

在相應介面的Json 檔案中加入屬性、值，值只能是十六進位制的顏色。

"navigationBarBackgroundColor":"十六進位制顏色"

底部導航欄

1. 新增底部導航欄

在app.json中新增tabBar程式碼：

"tabBar":{
    "selectedColor" : "#1296016",
    "list":[
        {
            "pagePath" : "pages/index/index",
            "text" : "首頁",
            "iconPath" : "/images/icon/home.png",
            "selectedIconPath" : "/images/icon/homeSelected.png"
        },
        {
            "pagePath" : "pages/mine/mine",
            "text" : "我的",
            "iconPath" : "/images/icon/mine.png",
            "selectedIconPath" : "/images/icon/mineSelected.png"
        }
    ]

 

• selectedColor 設定的是選中之後的圖示描述文字顏色
• iconPath的值不能為空

2. 底部導航欄頁面之間的跳轉

a）“首頁”和“我的”之間的跳轉時使用switchTab，使用navigateTo、navigateBack和redirectTo並不起作用；

b）從首頁跳到“page1”（page1不是帶有底部導航欄的頁面），那麼在page1介面要跳回到首頁的話使用redirectTo和navigateTo是沒用的，使用switchTab或者navigateBack(使用navigateBack的前提是從首頁跳到page1用的是navigateTo)

wx.switchTab({
	url:'../page1/page1'

 

全屏導航欄

1. 設定全屏模式

在json檔案中加 "navigation"屬性，值為：" custom"；

"navigationStyle": "custom"

2. 自定義導航欄

在wxml中加入程式碼：

<view class="customTitleBar" style="top:{{top}}px">
  微信小程式
</view>

wxss中程式碼：

.customTitleBar {
    position:fixed;/*出現滾動條的時候仍能保證標題在最上邊*/
    z-index:10000;/*讓這個view浮在最上層*/
    color:white;/*設定文字顏色*/
    text-align:center;/*設定文字居中*/
    width:100%;/*設定寬度為整個螢幕的寬度，配置text-align使用*/
}
 

js中加入

data{
    top: wx.getMenuButtonBoundingClientRect().top
}