小程序底部导航栏
2018-11-19 本文已影响0人
爱上小程序
创建微信小程序的底部导航栏,需要用到“tabBar”
tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
tabBar定义在app.josn里
1)新建两个页面(新建页面方法)user 和 classify
确定你的两个页面在app.josn中已注册
2)在app.josn中定义tabBar
每多加一个tab就要多写一段,并用大括号扩起来
"tabBar": {
"list": [
{
"pagePath": "pages/index/index", //跳转路径
"text": "首页", //tab显示文本
"iconPath": "image/index.png", //tab图标
"selectedIconPath": "image/index1.png" //选中时tab的图标
},
{
"pagePath": "pages/public/public",
"text": "分类",
"iconPath": "image/classify-d.png",
"selectedIconPath": "image/classify-d.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "image/user.png",
"selectedIconPath": "image/user-d.png"
}
]
}
tabBar的一些常用属性,可以根据这些属性设计出你想要的导航栏样式
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
color | HexColor | 是 | tab 上的文字默认颜色 | |
selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | |
backgroundColor | HexColor | 是 | tab 的背景色 | |
borderStyle | String | 否 | black | tabbar上边框的颜色, 仅支持 black/white |
list | Array | 是 | tab 的列表,详见 list 属性说明,最少2个、最多5个 | |
backgroundColor | String | 否 | bottom | 可选值 bottom、top |