uni-app入门（pages.json配置项列表）

最新推荐文章于 2024-10-17 11:01:58 发布

chowhoundgh

最新推荐文章于 2024-10-17 11:01:58 发布

阅读量804

点赞数

文章标签： android 小程序 uni-app

本文链接：https://blog.csdn.net/qq_43078424/article/details/108976761

版权

本文介绍了uni-app中pages.json的配置，重点讲解了tabBar的设置，包括tabBar的位置、数量限制及页面生命周期。同时提到了condition启动模式配置，用于模拟直达页面场景，适用于开发阶段。

摘要由CSDN通过智能技术生成

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

注意：

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

属性说明：

属性	类型	必填	默认值	描述
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、top
fontSize	String	否	10px	文字默认大小
iconWidth	String	否	24px	图标默认宽度（高度等比例缩放）
spacing	String	否	3px	图标和文字的间距
height	String	否	50px	tabBar 默认高度