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

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

tabBar

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

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

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

在app.json中寫tanBar的配置，tabBar與pages、window同級。

  "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步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。

更多小程序資訊，盡在：m.zytcm.com.cn/xiaocx/