微信小程序tabBar

实现微信小程序的导航跳转

1.在app.json中配置路由

  "pages": [
    "pages/index/index",
    "pages/coupon/coupon",
    "pages/shop/shop",
    "pages/mine/mine"
  ],

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      },
      {
        "pagePath": "pages/coupon/coupon",
        "text": "优惠券",
        "iconPath": "image/index.png",
        " ": "image/indexs.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "找好店",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      }
    ]
  },

iconPath：是你的图标

selectedIconPath：是激活的图标

pagePath：路径

text：标题名字

如果需要使用全局配置还需要在当前的json文件页面引入app.json

  "usingComponents": {
    "./app.json": "../../app.json"
  }

效果图：