微信小程序-贪吃蛇开发2 tabBar的添加使用

本系列是作者自学实践过程的记录
本文是tabBar的添加与使用
有问题欢迎讨论

一、tabBar介绍

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

常用属性

属性	类型	说明
color	HexColor	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	tab 的背景色，仅支持十六进制颜色
borderStyle	String	tabbar 上边框的颜色， 仅支持 black / white
list	array	tab 的列表,也就是页面切换按钮的个数，最少2个，最多5个
position	String	tabBar 的位置，仅支持 bottom / top
custom	boolean	自定义 tabBar，用户自己在app.json中进行配置

二、配置tabBar

打开app.json，输入对应的tabBar的键值对，键是"tabBar"，值是对应的"list"，注意：list最少为两个

• 效果如图
  
  list属性配置
• pagePath：表示点击按钮后切换的目标页面的路径，和pages属性的值一致
• text：tab上的文字
• iconPath：tab按钮上的图片路径，同样采用相对寻址的方式
• selectedIconPath：点击tab按钮后图片变化后的样式，页式相对寻址方式
• 效果如图