微信小程序自定义tabBar（实操）

一、前言

一般使用tabBar的样式，固定不能改变。如下固定效果图：

如何自定义自己想要的效果图呢，举个例子。如下自定义效果图：

二、固定效果图实现步骤

使用微信开发者工具-创建项目我就不说了，官方文档很详细。
参考：官方文档介绍

实现步骤

1、添加images文件，添加想要的矢量图（可通过阿里巴巴矢量图免费获取）
2、在app.json文件中，编辑代码
3、保存，刷新即可

完整代码-矢量图

images图片

app.json代码

{
   
   
  "pages":[
    "pages/index/index",
    "pages/logs/index",
    "pages/commdt/index",
    "pages/cart/index",
    "pages/mymessage/index"
  ],
  "window":{
   
   
    "backgroundTextStyle":"light",
    "navigationBarTitleText": "测试tabbar",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
   
   
    "color": "#B6B6B6",
    "selectedColor": "#FE9132",
    "list": [
      {
   
   
        "pagePath":"pages/index/index",
        "text": "首页",
        "iconPath":"/images/sy2.png",
        "selectedIconPath": "/images/sy1.png"
      },
      {
   
   
        "pagePath":"pages/commdt/index",
        "text": "商品",
        "iconPath":"/images/sp2.png