微信小程序导航栏的设置——集结02（自用收藏）—2018-10-22

微信小程序导航顶部设置：

关于小程序导航顶部配置都写在.json文件中：
{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}
解释：navigationBarBackgroundColor 导航栏背景颜色，如”#000000”

navigationBarTextStyle 导航栏标题颜色，仅支持 black/white

navigationBarTitleText 导航栏标题文字内容

backgroundColor 窗口的背景色

backgroundTextStyle 下拉背景字体、loading 图的样式，仅支持 dark/light

enablePullDownRefresh 是否开启下拉刷新，详见页面相关事件处理函数。 
--------------------- 
原文：https://blog.csdn.net/qq_34827048/article/details/75112121
版权声明：本文为博主原创文章，转载请附上博文链接！

 

微信小程序底部导航设置：

我们找到项目根目录中的配置文件 app.json 加入如下配置信息：

1. "tabBar": {

2. "color": "#a9b7b7",

3. "selectedColor": "#11cd6e",

4. "borderStyle":"white",

5. "list": [{

6. "selectedIconPath": "images/111.png",

7. "iconPath": "images/11.png",

8. "pagePath": "pages/index/index",

9. "text": "首页"

10. }, {

11. "selectedIconPath": "images/221.png",

12. "iconPath": "images/22.png",

13. "pagePath": "pages/logs/logs",

14. "text": "日志"

15. }, {

16. "selectedIconPath": "images/331.png",

17. "iconPath": "images/33.png",

18. "pagePath": "pages/test/test",

19. "text": "开心测试"

20. }]

21. },

解释一下 对应的属性信息：

tabBar  指底部的 导航配置属性

color  未选择时 底部导航文字的颜色

selectedColor  选择时 底部导航文字的颜色

borderStyle  底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字

如果要改变更详细的样式 请参看

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

原文：https://blog.csdn.net/u012118993/article/details/52943783