⼩程序标签栏tabBar
⼩程序主页⾯⼤部分都定义了底部标签栏，定义⼀个标签栏只需要在app.json⾥做声明即可，代码如下:
"tabBar": {
"color": "black",
"selectedColor": "red",
"borderStyle": "black",
"backgroundColor": "gray",
"position": "bottom",
"list": [
{
"text": "⾸页",
"pagePath": "pages/index/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png"
},
{
"text": "我的",
"pagePath": "pages/mine/mine",
position标签属性"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png"
}
]
}
上⾯这段代码position设置为bottom，即为默认属性，展⽰在页⾯的底部，截图如下:
若把position设置为top，状态栏即展⽰在⼩程序页⾯顶部，位于toolbar之下，截图如下:
-------------------------------------------------------------- 官⽅资料----------------------------------------------------------------------------------
tabBar
如果我们的⼩程序是⼀个多 tab 应⽤（客户端窗⼝的底部或顶部有 tab 栏可以切换页⾯），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显⽰的对应页⾯。
Tip： 通过页⾯跳转（wx.navigateTo）或者页⾯重定向（wx.redirectTo）所到达的页⾯，即使它是定义在 tabBar 配置中的页⾯，也不会显⽰底部的 tab 栏。
tabBar 是⼀个数组，只能配置最少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
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
selectedIconPath String是选中时的图⽚路径，icon ⼤⼩限制为40kb，建议尺⼨为 81px * 81px
-------------------------------------------------------------- 官⽅资料----------------------------------------------------------------------------------

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。