微信小程序，商城底部工具栏的实现

效果演示：

 

前提条件：

去阿里云矢量图标，下载8个图标，四个黑，四个红，如图：

新建文件夹icons，把图标放到该文件夹，然后把该文件夹移动到该项目的文件夹里面。如图所示

 

 

app.json

{
"pages": ["pages/home/home","pages/category/category","pages/cart/cart","pages/my/my"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#09bb07","navigationBarTitleText": "我的商场","navigationBarTextStyle": "white"},
"tabBar": {"color": "#999","selectedColor": "##09bb07","backgroundColor": "#fafafa","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "icons/_home.png","selectedIconPath": "icons/home.png"},{"pagePath": "pages/category/category","text": "分类","iconPath": "icons/_category.png","selectedIconPath": "icons/category.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "icons/_cart.png","selectedIconPath": "icons/cart.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "icons/_my.png","selectedIconPath": "icons/my.png"}]},"lazyCodeLoading": "requiredComponents","sitemapLocation": "sitemap.json"
}