«

微信小程序tabBar

时间:2023-7-10 18:53     作者:小诸葛     分类: 微信小程序     正在检查是否收录...


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

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

效果图:

tabBar 微信小程序菜单

推荐阅读:


扫描二维码,在手机上阅读