微信小程序-页面跳转Tabbar

发布时间 2023-05-21 23:27:09作者: BNTang

官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

首先我们需要搭建一个 Tabbar,在搭建之前我们将需要跳转的页面创建一下待会需要使用到。

创建 me 我的页面,在 pages 当中鼠标右键新建页面即可,在新建一个 order 订单页面,更改 app.json 配置添加 tabBar 配置项:

{
  "tabBar": {
    "color": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/assets/images/cart.png",
        "selectedIconPath": "/assets/images/cart-active.png"
      },
      {
      "pagePath": "pages/order/order",
      "text": "订单",
      "iconPath": "/assets/images/cart.png",
      "selectedIconPath": "/assets/images/cart-active.png"
      }, 
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "/assets/images/user.png",
        "selectedIconPath": "/assets/images/user-active.png"
      }
    ]
  }
}

图片,需要的私信我。