对小程序中的Tabbar 的用法的理解总结

2019独角兽企业重金招聘Python工程师标准>>>

第一阶段：在 app.json 中配置

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }

出现问题：有些页面不想有tabBar，如：在首页发现没有身份信息，跳转到登录页时仍然有TabBar。

第二阶段：只有一级页面才会出现Tabbar ，所谓的一级页面就是Tabbar里定义的页面
如果此页面没有在Tabbar里定义，不会显示TabBar的

问题依然存在，登录页依然存在TabBar。

第三阶段：如果从一级页面 redirectTo到其他页面，及时其他页面没有在 TabBar定义的列表里也会显示TabBar

最终解决问题的方法是，加入当前也是一级页面，到希望跳转到的页面不要有Tabbar时，不要使用 redirectTo而是使用 navigateTo

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 按数组的顺序排序。

 

转载于:https://my.oschina.net/yanyaya/blog/1609488