微信小程序开发实战（20）：TabBar导航

在很多App中，首页的下方通常会出现3到5个TabBar按钮，如图1所示。通过这些按钮，可以切换到不同的页面。其实这也属于导航的一种方式。

图1 App中TabBar的效果

其实小程序可以用非常简单的方式来实现这个效果，这一切不需要编写一行JavaScript代码。现在准备3个页面，如果是新建的小程序工程，默认会建立两个页面：index和logs，我们可以再建立一个page页面（新加的页面不要忘了在app.json文件中配置）。包含3个页面的工程结构如图2所示。

图2 工程目录结构

添加TabBar按钮，只需在app.json文件中添加tabBar属性即可，代码如下：

{
   … …
   "tabBar": {
    "color": "#dddddd",                            //  未选中状态按钮文字的颜色
    "selectedColor": "#3cc51f",                   //  选中状态按钮文字的颜色
    "backgroundColor": "#ffffff",                 //  背景色
    "list": [{                                       //  该数组元素表示TabBar按钮
      "pagePath": "pages/index/index",              //  当前按钮指向的页面
      "iconPath": "../../images/face1.png",       //  未被选中时的按钮图像文件路径
      "selectedIconPath": "../../images/face.png", //  被选中时的按钮图像文件路径
      "text": "页面1"
    }, {  
      "pagePath": "pages/logs/logs",                //  当前按钮指向的页面
      "iconPath": "../../images/wechat.png",
      "selectedIconPath": "../../images/wechatHL.png",
      "text": "页面2"
    }
    , {  
      "pagePath": "pages/page/page",                //  当前按钮指向的页面
      "iconPath": "../../images/wechat.png",
      "selectedIconPath": "../../images/wechatHL.png",
      "text": "页面3"
    }
    ]
  }
}

运行程序后，会显示如图3所示的效果。点击TabBar按钮可切换不同的页面。

图3 带TabBar的小程序

实际上，通过将tabBar的position属性值设为top，会将按钮放到页面上方，不过图像就不会显示了，效果如图4所示。

图4 在页面顶端显示TabBar的效果