小程序教程

微信小程序TabBar底部栏的使用

字号+ 作者: 来源: 2016-11-23 09:49 我要评论( )


app.json文件:


  1. {
  2.     "pages":[
  3.         "pages/index/index",
  4.         "pages/detail/detail"
  5.     ],
  6.     "window":{
  7.         "navigationBarTitleText": "TabBar",
  8.         "navigationBarBackgroundColor": "#F60",
  9.         "navigationBarTextStyle": "white"
  10.     },

  11. //tabBar注意是B是大写,有朋友提问运行时tab没出现,检查是不是这里手误
  12.     "tabBar":{

  13. //文档指出color是必填项,其实可为空,不重写color就是深灰,样式更统一
  14.         "color": "#ddd",

  15. //同样,文档指出selectedColor是必填项,不过selectedColor有必要重写,区分当前项与普通项
  16.         "selectedColor": "#3cc51f",

  17. //同样,文档指出color是必填项,其实可为空,不重写backgroundColor就是浅灰,样式更统一。
  18.         "backgroundColor": "#fff",

  19. //borderStyle,不写默认就是黑,那就黑好了,white的话,会少一条分隔线,跟页面混在一起了
  20.         "borderStyle":"black",
  21.         "list":[{
  22.                 "pagePath":"pages/index/index",

  23. //iconPath图标是非必填,只是tab栏会变矮,自然selectedIconPath也可不写
  24.                 "iconPath":"image/icon_API.png",
  25.                 "selectedIconPath":"image/icon_API_HL.png",
  26.                 "text":"index"
  27.             },{
  28.                 "pagePath":"pages/detail/detail",
  29.                 "iconPath":"image/icon_component.png",
  30.                 "selectedIconPath":"image/icon_component_HL.png",
  31.                 "text":"detail"
  32.             }]
  33.     }
  34. }

复制代码


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
d