商城小程序需要四个底部导航按钮,遂记录一下实现过程
最终实现效果如下所示
新建一个小程序项目,我是创建了JS模板,项目创建完成后需要新建五个文件夹,其中四个(page子文件夹)用于存放pages文件,一个sources文件夹(与pages同级)用于存放资源文件,如图标文件
图标需要8个,因为选中的图标和未选中的图标需要进行区分
图标文件源于阿里巴巴矢量图库
需要在app.json中添加以下配置信息,其中tabBar是新增的,其余均为系统默认生成
{
"pages": [
"pages/Homepage/Homepage",
"pages/index/index",
"pages/logs/logs",
"pages/Mine/mine",
"pages/Recommend/recommend",
"pages/ShoppingCart/shoppingCart"
],
"tabBar": {
"color": "#A9A9A9",
"selectedColor": "#000000",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"position": "bottom",
"custom": false,
"list": [
{
"pagePath": "pages/Homepage/Homepage",
"text": "首页",
"iconPath": "source/img/main.png",
"selectedIconPath": "source/img/main_selected.png"
},
{
"pagePath": "pages/Recommend/recommend",
"text": "推荐",
"iconPath": "source/img/star.png",
"selectedIconPath": "source/img/star_selected.png"
},
{
"pagePath": "pages/ShoppingCart/shoppingCart",
"text": "购物车",
"iconPath": "source/img/shop.png",
"selectedIconPath": "source/img/shop_selected.png"
},
{
"pagePath": "pages/Mine/mine",
"text": "个人中心",
"iconPath": "source/img/my.png",
"selectedIconPath": "source/img/my_selected.png"
}
]
},
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}