小程序开发基础10--tabbar底部多选择页面组件（小程序底部导航栏）

1.认识组件

官方文档：（选择tabBar查看）https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#%E9%85%8D%E7%BD%AE%E9%A1%B9
文档直通车，选择TabBar

• 一个小程序可以配置2-5个多页面，
  
  我们这里以创建3个页面来给大家做下讲解。
  

2.创建资源目录，存放图标数据

• 创建image目录
  
• 将下载好的图标文件传入到image文件夹中
  
  

3.创建多个页面，并设置页面参数布局

上面三个页面创建好以后，我们就可以通过tabBar来设置多页面布局了。
在app.json里添加如下配置。

这样我们就可以实现可以自由切换的多页面小程序了。

设置tabbar的代码

"tabBar": {
    "color": "#Fc0",
    "selectedColor": "#f4c903",
    "borderStyle": "white",
    "list": [{
        "selectedIconPath": "image/tab1-ok.png",
        "iconPath": "image/tab1.png",
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "selectedIconPath": "image/tab2-ok.png",
        "iconPath": "image/tab2.png",
        "pagePath": "pages/me/me",
        "text": "我的"
      }
    ]
  },