微信小程序 - 导航栏（顶部+底部+顶部全屏自定义）_navigationbartitletext默认大小

目录

顶部导航栏（常规模式）

自定义导航栏（全屏模式）

底部导航栏

---

顶部导航栏（常规模式）

                                                             

1. 设置导航栏文字

在相应界面的json中加入属性、值：

"navigationBarTitleText":"标题内容",
"navigationBarTextStyle":"white"

     2.设置导航栏颜色

在相应界面的Json 文件中加入属性、值，值只能是十六进制的颜色。

"navigationBarBackgroundColor":"十六进制颜色"

---

自定义导航栏（全屏模式）

                 

    1. 设置全屏模式

在json文件中加 "navigation"属性，值为：" custom"；

"navigationStyle": "custom"

    2.自定义导航栏

在A.wxml文件中加入代码：

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

在A.wxss中加入：

.customTitleBar {
    position:fixed;/*出现滚动条的时候仍能保证标题在最上边*/
    z-index:10000;/*让这个view浮在最上层*/
    color:white;/*设置文字颜色*/
    text-align:center;/*设置文字居中*/
    width:100%;/*设置宽度为整个屏幕的宽度，配置text-align使用*/
}

在A.js文件中加入：

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

---

底部导航栏

                                                           

    1.添加底部导航栏

在app.json中添加代码：

"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"
        }
    ]
}

代码中：

1. selectedColor设置的是选中之后的图标描述文字颜色；
2. iconPath的值不能为空；

    2.导航栏界面之间的跳转

a）“首页”和“我的”之间的跳转时使用switchTab，使用navigateTo、navigateBack和redirectTo并不起作用；

b）从首页跳到“page1”（page1不是带有底部导航栏的页面），那么在page1界面要跳回到首页的话使用redirectTo和navigateTo是没用的，使用switchTab或者navigateBack(使用navigateBack的前提是从首页跳到page1用的是navigateTo)

wx.switchTab({
	url:'../page1/page1'
});

---