微信小程序之 Tabbar(底部选项卡)
2024-09-06 06:16:51
1.项目目录
2.在app.json里填写:tab个数范围2-5个
app.json
{
"pages": [
"pages/index/index",
"pages/audiobook/audiobook",
"pages/broadcast/broadcast",
"pages/group/group",
"pages/mine/mine"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#949494",
"selectedColor": "#42bd56",
"borderStyle": "black",
"list": [
{
"selectedIconPath": "assets/images/ic_tab_home_active.png",
"iconPath": "assets/images/ic_tab_home_normal.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "assets/images/ic_tab_subject_active.png",
"iconPath": "assets/images/ic_tab_subject_normal.png",
"pagePath": "pages/audiobook/audiobook",
"text": "书影音"
},
{
"selectedIconPath": "assets/images/ic_tab_status_active.png",
"iconPath": "assets/images/ic_tab_status_normal.png",
"pagePath": "pages/broadcast/broadcast",
"text": "广播"
},
{
"selectedIconPath": "assets/images/ic_tab_group_active.png",
"iconPath": "assets/images/ic_tab_group_normal.png",
"pagePath": "pages/group/group",
"text": "小组"
},
{
"selectedIconPath": "assets/images/ic_tab_profile_active.png",
"iconPath": "assets/images/ic_tab_profile_normal.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
}
}
3.属性详解
4.效果图
最新文章
- bochs上网及配置
- C#访问Azure的资源
- 关于Depth Bounds Test (DBT)和在CE3的运用
- jfinal
- jQuery的delegate()与proxy()方法
- windows api线程
- React属性和状态对比
- C语言默认參数值的实现
- MSP430单片机输入与输出
- 命令 ";sudo -H"; 中的这个 ";H"; 什么作用?
- Unity-视图
- acm课程练习2--1003
- ASP.NET MVC5写.php路由匹配时的问题 ASP.NET MVC 4 在 .NET 4.0 与.NET 4.5 的專案範本差異
- [No000015A]SQL语句分类
- Struts2验证框架_xml验证失败
- 每日linux命令学习-历史指令查询(history、fc、alias)
- Palindrome II
- Servlet之javax.servlet包
- nginx反向代理后abp的webapi host如何获取客户端ip?
- RabbitMQ的安装和配置化可视界面