小程序底部导航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步上线。。。通过拖拽、拼接模？？榻峁剐〕绦蛏坛且趁
，，，，所看即所得
，，，，只需要美工就能做出细腻商城。。。

更多微信小程序相关资讯
，，，，请前往：/miniprogramschool/