微信小程序官方文档中TabBar

最新推荐文章于 2024-09-02 12:25:42 发布

原创最新推荐文章于 2024-09-02 12:25:42 发布 · 527 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文档详细介绍了如何在小程序中创建并配置TabBar，包括删除原有页面、新建四个核心页面（首页、消息、文档、我的）、设置各页面的navigationBarTitleText以及在app.json中配置TabBar的样式和各个页面的路径、图标等信息，最终实现底部导航栏的切换效果。

根据官方文档写的`tabBar`

先创建文件夹
- 图标：images文件夹下的icon
- 先删除原来pages文件夹下的页面
- 在重新在pages文件夹下新建四个页面，分别是：
  - chat：消息
  - doc：文档
  - home：首页
  - profile：我的
目录结构：

在这里插入图片描述

在每个页面文件夹下的index.json中，写入："navigationBarTitleText": ""，这样便于辨认tabBar之间的切换。

在home页面中的index.json中

{
  "usingComponents": {},
  "navigationBarTitleText": "首页"
}

在chat页面中的index.json中

{
  "usingComponents": {},
  "navigationBarTitleText": "消息"
}

在doc页面中的index.json中

{
  "usingComponents": {},
  "navigationBarTitleText": "文档"
}

在profile页面中的index.json中

{
  "usingComponents": {},
  "navigationBarTitleText": "我的"
}

最后在app.json中配置tabBar

{
  "pages":[
    "pages/home/index",
    "pages/doc/index",
    "pages/chat/index",
    "pages/profile/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#30c6c7",
    "selectedColor": "#fa8c57",
    "backgroundColor": "#f9f9f9",
    "borderStyle":"black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "首页",
        "iconPath": "./images/icon/home.png",
        "selectedIconPath": "./images/icon/home_selected.png"
      },
      {
        "pagePath": "pages/doc/index",
        "text": "文档",
        "iconPath": "./images/icon/document.png",
        "selectedIconPath": "./images/icon/document_selected.png"
      },{
        "pagePath": "pages/chat/index",
        "text": "消息",
        "iconPath": "./images/icon/chat.png",
        "selectedIconPath": "./images/icon/chat_selected.png"
      },{
        "pagePath": "pages/profile/index",
        "text": "我的",
        "iconPath": "./images/icon/user.png",
        "selectedIconPath": "./images/icon/user_selected.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}