微信小程序之tabBar開發(fā)教程

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

tabBar

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

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

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

在app.json中寫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": "首頁"
      },
      {
        "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)了~

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

更多小程序資訊，盡在：descansotropical.com/xiaocx/