微信小程式底部選單欄如何設定
阿新 • • 發佈:2019-01-22
在做微信小程式的時候,底部選單一開始並不理解是怎麼回事,寫成之後發現其實很簡單。
在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'
})