开发微信小程序时通常需要自定义底部菜单内容,来实现不同的主要页面之间的切换。想要实现此功能只需要在 app.json 中配置即可。
"pages": [ ... ],
"window": { ... },
"tabBar": {
"list": [
{
"pagePath": "pages/index/index", // 此菜单切换的页面路径,必须是包含在 pages 中的路径
"text": "首页", // 菜单描述
"iconPath": "images/shouye1.png", // 菜单默认图标
"selectedIconPath": "images/shouye2.png" // 菜单被选中后的图标
},
{
"pagePath": "pages/news/news",
"text": "资讯",
"iconPath": "images/zixun1.png",
"selectedIconPath": "images/zixun2.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "images/wode1.png",
"selectedIconPath": "images/wode2.png"
}
],
"position": "bottom", // 菜单位置,一般固定在底部
"color": "#000000", // 菜单字体默认颜色
"selectedColor": "#FF6347" // 菜单字体被选中后的颜色
}
- 效果展现