微信小程序TabBar的使用

     一、TabBar使用步驟

          1.創建所需要的界面和所需要的圖片：

        

       2.配置文件：

我們找到項目根目錄中的配置文件 app.json 加入如下配置信息

         

       

 "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "image/tab_home_select.png",
        "iconPath": "image/tab_home.png",
        "pagePath": "pages/home/home",
        "text": "首頁"
      },
      {
        "selectedIconPath": "image/tab_msg_select.png",
        "iconPath": "image/tab_msg.png",
        "pagePath": "pages/message/message",
        "text": "消息"
      },
      {
        "selectedIconPath": "image/tab_me_select.png",
        "iconPath": "image/tab_me.png",
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  }

 

       屬性的解釋

       tabBar  指底部的 導航配置屬性

       color  未選擇時 底部導航文字的顏色

       selectedColor  選擇時 底部導航文字的顏色

       borderStyle  底部導航邊框的樣色（注意 這里如果沒有寫入樣式 會導致 導航框上邊框會出現默認的淺灰色線條）

       list   導航配置數組

       selectedIconPath 選中時 圖標路徑

       iconPath 未選擇時 圖標路徑

       pagePath 頁面訪問地址

       text  導航圖標下方文字

 

 二、不同界面的跳轉：

       頁面要返回/跳轉至tabbar的某一頁面，可用：

wx.switchTab({  
      url: '../b/b'  
    }); 

          注意switchTab只能跳轉到帶有tab的頁面，不能跳轉到不帶tab的頁面

          跳轉不帶tab的頁面還是用redirectTo或者navigateTo 

          故如果post頁面沒有加入tab選項卡，依然使用redirectTo或者navigateTo進行跳轉

         

wx.navigateTo({  
     url: '../b/b'  
   });  
wx.redirectTo({  
     url: '../b/b'  
   });