您的位置:首页 > 移动开发 > 微信开发

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

2018-01-19 00:00 218 查看
第一阶段:在 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相关属性定义说明:

属性类型必填默认值描述
colorHexColortab 上的文字默认颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortab 的背景色
borderStyleStringblacktabbar上边框的颜色, 仅支持 black/white
listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab
positionStringbottom可选值 bottom、top
tabBar list定义说明:

属性类型必填说明
pagePathString页面路径,必须在 pages 中先定义
textStringtab 上按钮文字
iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px
selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px
tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: