微信小程序--代码编写--Tabbar配置

实现静态的小程序Demo

{
  "pages":[
    "pages/index/index",
    "pages/join/join",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0f0",
    "navigationBarTitleText": "这是第一个测试小程序Demo",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "selectedColor": "#00f",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/home.jpg",
      "selectedIconPath": "images/home1.jpg"
    },
    { 
      "pagePath": "pages/join/join",
      "text": "加入",
      "iconPath": "images/join_p.jpg",
      "selectedIconPath": "images/join_n.jpg"
    }]
  }
}

 代码分析：

13行：

 "tabBar":

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

1. 当设置 position 为 top 时，将不会显示 icon
2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

 

 

 

 

调试结果如下：