1. 程式人生 > >微信小程式底部選單欄如何設定

微信小程式底部選單欄如何設定

在做微信小程式的時候,底部選單一開始並不理解是怎麼回事,寫成之後發現其實很簡單。

在app.json中填寫選單列表

"tabBar": {
    "color": "#a9b7b7",//未選中時導航欄字型顏色
    "selectedColor": "#11cd6e",//選中時導航欄字型顏色
    "borderStyle": "white",//底部導航欄的邊框樣式
    "list": [//選單內容列表
      {//第一個選單內容
        "selectedIconPath": "public/ping.png",
        "iconPath": "public/ping.png",
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {//第二個選單內容
        "selectedIconPath": "public/wode.png",//選中時圖示路徑
        "iconPath": "public/wode.png",//未選中時圖示路徑
        "pagePath": "pages/home/home",點選路徑
        "text": "我的"//選單文字內容
      }
    ]
  }

寫到這導航欄就出現頁面底部了

有別的頁面跳轉到帶有導航欄的頁面時只能用wx.switchTab,比如登入之後進入首頁,有登入頁跳轉到首頁就要用到。

wx.switchTab({
              url: '../index/index'
            })