1. 程式人生 > >微信小程式開發之選項卡(視窗底部TabBar)頁面切換

微信小程式開發之選項卡(視窗底部TabBar)頁面切換

微信小程式開發中視窗底部tab欄切換頁面很簡單很方便.


程式碼:

1.app.json

//app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#999999",
    "navigationBarTitleText": "tab",
    "navigationBarTextStyle":"white"
  },
   "tabBar": {
    "color": "#ccc",
    "selectedColor": "#35495e",
    "borderStyle": "white",
    "backgroundColor": "#f9f9f9",
    "list": [
      {
        "text": "首頁",
        "pagePath": "pages/index/index",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-actived.png"
      },
      {
        "text": "目錄",
        "pagePath": "pages/catalogue/catalogue",
        "iconPath": "images/note.png",
        "selectedIconPath": "images/note-actived.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/mine/mine",
        "iconPath": "images/profile.png",
        "selectedIconPath": "images/profile-actived.png"
      }
    ]
  }
}
pagePath是頁面路徑.iconPath是圖片路徑,icon 大小限制為40kb.

selectedIconPath:選中時的圖片路徑,icon 大小限制為40kb

tab Bar的最多5個,最少2個.

在pages目錄下寫好頁面即可切換.

http://blog.csdn.net/qq_31383345