小程序底部導(dǎo)航Tabbar 底部導(dǎo)航欄這個(gè)功能是非常常見(jiàn)的一個(gè)功能,基本上一個(gè)完成的app,都會(huì)存在一個(gè)導(dǎo)航欄,那么微信小程序的導(dǎo)航欄該怎么實(shí)現(xiàn)呢?

tabBar

先創(chuàng)建幾個(gè)頁(yè)面，要注意文件夾和頁(yè)面名稱，以及app.json里面的配置。官方文檔描述的很詳細(xì)。

注意：為了方便開(kāi)發(fā)者減少配置項(xiàng)，描述頁(yè)面的四個(gè)文件必須具有相同的路徑與文件名。

創(chuàng)建一個(gè)放圖片的文件夾，放上幾張tabBar小圖標(biāo)。

在app.json中寫(xiě)tanBar的配置，tabBar與pages、window同級(jí)。

  "tabBar":{
    "color": "#ddd",
    "selectedColor": "#1AAD00",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list":[
      {
        "pagePath": "pages/index/index",
       "iconPath": "images/footer-icon-01.png",
      "selectedIconPath": "images/footer-icon-01-active.png",
        "text": "首頁(yè)"
      },
      {
        "pagePath": "pages/find/find",
        "iconPath": "images/footer-icon-03.png",
        "selectedIconPath": "images/footer-icon-03-active.png",
        "text": "發(fā)現(xiàn)"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/footer-icon-04.png",
        "selectedIconPath": "images/footer-icon-04-active.png",
        "text": "我的"
      }
    ]
  }

編譯一下，tabBar就出現(xiàn)了~

小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。

更多微信小程序相關(guān)資訊，請(qǐng)前往：http://www.fluoresville.cn/miniprogramschool/