仿智行火车票12306微信小程序底部标签导航实现

仿智行火车票12306微信小程序的底部标签导航分为4个标签导航：火车票、飞机票、汽车票、个人中心。标签导航选中时导航图标会变为蓝色图标，导航文字会变为蓝色文字，如图14所示。

图14  底部标签导航选中效果

（1）新建一个zxtrain项目的微信小程序，将准备好的底部标签导航图标、海报轮播图片、火车票界面图标、个人中心界面图标放置在zxtrain项目下。

（2）打开app.json配置文件，在pages数组里添加四个页面路径"pages/train/train"    "pages/airplane/airplane""pages/bus/bus""pages/mycenter/mycenter"，保存后会自动生成相应的页面文件夹；删除掉"pages/index/index""pages/logs/logs"页面路径以及对应的文件夹，具体代码如下所示。

{
  "pages":[
    "pages/train/train",
    "pages/airplane/airplane",
    "pages/bus/bus",
    "pages/mycenter/mycenter"
  ],

（3）在window数组里配置窗口导航背景颜色为蓝色（#5495E6），导航栏文字为智行12306，字体颜色设置为白色（#ffffff），具体代码如下所示。

（4）在tabBar对象里配置底部标签导航背景色为白色（#fffff），文字默认颜色为灰色，选中时为蓝色（#5495E6），在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标，具体代码如下所示。

{
  "pages":[
    
    "pages/train/train",
    "pages/airplane/airplane",
    "pages/bus/bus",
    "pages/mycenter/mycenter",
    "pages/trainList/trainList",
    "pages/grabticket/grabticket"
     
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#5495E6",//用于定义小程序顶部导航栏的背景颜色
    "navigationBarTitleText": "智行12306",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "selectedColor": "#5495E6",
    "backgroundColor": "#fffff",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/train/train",
      "text": "火车票",
      "iconPath": "images/bar/hcp-0.jpg",
      "selectedIconPath": "images/bar/hcp-1.jpg"
    },{
      "pagePath": "pages/airplane/airplane",
      "text": "飞机票",
      "iconPath": "images/bar/fjp-0.jpg",
      "selectedIconPath": "images/bar/fjp-1.jpg"
    },{
      "pagePath": "pages/bus/bus",
      "text": "汽车票",
      "iconPath": "images/bar/qcp-0.jpg",
      "selectedIconPath": "images/bar/qcp-1.jpg"
    },{
      "pagePath": "pages/mycenter/mycenter",
      "text": "个人中心",
      "iconPath": "images/bar/grzx-0.jpg",
      "selectedIconPath": "images/bar/grzx-1.jpg"
    }]
  }
}

---

这样就完成了仿智行火车票12306微信小程序的底部标签导航配置，单击不同的导航，可以进行切换显示不同的页面，同时导航图标和导航文字会呈现为选中状态，如图15所示。