一：导航栏样式设置

小程序的导航栏样式在app.json中定义。

这里设置导航，背景黑色，文字白色，文字内容测试小程序

app.json内容：

{
  "pages":[
    "pages/index/index",
    "pages/login/login",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"red",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "测试小程序",
    "navigationBarTextStyle":"#fff"
  }
}

window中的样式说明：

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor 000000 导航栏背景颜色，如”#000000”  
navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white
navigationBarTitleText String   导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新

效果：

 1 "tabBar": {
 2     "selectedColor": "#1296db",
 3     "list": [{
 4       "pagePath": "pages/index/index",
 5       "text": "首页",
 6       "iconPath": "images/ico-home.png",//找到图片在哪个文件夹（写路径）
 7       "selectedIconPath": "images/ico-home-d.png"
 8     },{
 9       "pagePath": "pages/setting/setting",
10       "text": "设置",
11       "iconPath": "images/ico-setting.png",//找到图片在那个文件夹（写路径）
12       "selectedIconPath": "images/ico-setting-d.png"
13     },{
14       "pagePath": "pages/help/help",
15       "text": "帮助",
16       "iconPath": "images/ico-help.png",//找到图片在那个文件夹（写路径）
17       "selectedIconPath": "images/ico-help-d.png"
18     }]
19   }

 注意：两个图标是有两个路径，第一个是当前默认图标的路径（“iconPath”）；第二个是被选中之后图标路径（“selectedIconPath”），停留在那个页面，图标变色。

二：tabBar导航栏

tabBar挺好的，可以放置于顶部或者底部，用于不同功能页面的切换。

tabBar同样在app.json中进行定义，看一下我在app.json中对tabBar的相关定义：

效果：

tabBar相关属性定义说明：

属性 类型 必填 默认值 描述
color HexColor 是   tab 上的文字默认颜色
selectedColor HexColor 是   tab 上的文字选中时的颜色
backgroundColor HexColor 是   tab 的背景色
borderStyle String 否 black tabbar上边框的颜色， 仅支持 black/white
list Array 是   tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top

tabBar list定义说明：

属性 类型 必填 说明
pagePath String 是 页面路径，必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 是 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
selectedIconPath String 是 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

版权声明：本文为yuyu1993原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/yuyu1993/p/8274440.html