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

效果演示：

 

前提条件：

去阿里云矢量图标，下载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"
}