微信小程序，商城底部工具栏的实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序，商城底部工具栏的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果演示：

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

前提条件：

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

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

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

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

app.json文章来源地址https://www.toymoban.com/news/detail-611666.html

{
"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"
}

到了这里，关于微信小程序，商城底部工具栏的实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！