微信小程序之tabBar开发教程

class="output_wrapper" id="output_wrapper_id">

小程序底部导航Tabbar 底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?

tabBar

先创建几个页面，要注意文件夹和页面名称，以及app.json里面的配置。官方文档描述的很详细。

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

创建一个放图片的文件夹，放上几张tabBar小图标。

在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": "发现"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/footer-icon-04.png",
        "selectedIconPath": "images/footer-icon-04-active.png",
        "text": "我的"
      }
    ]
  }

编译一下，tabBar就出现了~

小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。

更多微信小程序相关资讯，请前往：https://www.kesion.com/miniprogramschool/