微信小程序官方文档中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"
  }
  

• 页面展示效果