全栈工程师之路-中级篇之小程序开发-第二章第六节tabBar详细说明

首先我们新建一个界面，还记得新建界面的快捷方式吗？
在app.json的pages里面，新增”pages/user/user”
即
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/user/user"
],
ctrl+s保存。小程序在检测到没有user目录的时候，就会自动创建相关的文件。
接下来我们来配置小程序的tab选择卡。这个组件是官方支持的，所以我们只要一点点的配置文件就可以实现。
我们在app.json文件中加入tabBar属性，保存（快捷键ctrl+s）
"tabBar":{
"list":[
{
"pagePath":"pages/index/index",
"text":"首页"
},{
"pagePath": "pages/user/user",
"text": "用户"
}
]
}

页面的最下方就出现了tabbar，我们可以分别点击首页和用户。我们看到了界面是有变化的，说明我们的tab功能已经实现了。
但是我们的界面有点丑，所以我们对tab进行美化。
网上有不少方案，这里我们采用工作量最低的方式。
阿里巴巴矢量图标库
随便搜索你自己喜欢的图标点击下载，再弹出的界面里编辑需要的颜色，这里我们需要两个状态，
一个是选中态，一个是常态，所以我们同一个图标可以下载两种颜色，然后记下这两种颜色，
下载别的图标的时候也选择这两种颜色，这样会使我们的界面看起来更加的和谐。

将文件存放到项目的images文件下。
然后修改tabbar属性的参数。
"tabBar":{
"color": "#bfbfbf",
"selectedColor":"#1afa29",
"borderStyle":"white",
"backgroungColor":"white",
"list":[
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"images/movie.png",
"selectedIconPath":"images/movie1.png"
},{
"pagePath": "pages/user/user",
"text": "用户",
"iconPath": "images/user.png",
"selectedIconPath": "images/user1.png"
}
]
}
常用的配置项上面都有了，更详细的参数可以查看官方的文档小程序官方tabBar说明
给链接不如复制粘贴。以下是小程序官方对tabBar的详细说明。
tabBar
如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

属性	类型	必填	默认值	描述
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

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫，希望你开心。
如果你觉得本文对你有帮助，请扫描文末二维码，支持博主原创。
希望大家关注我的个人公众号ionic_