微信小程序导航栏怎么写

微信小程序写到到导航栏还是非常简单得，就算没有三大框架的基础，也是非常容易理解`的。
接下来我们看看他是如何操作的：
以电商页面中常见的导航为例，会了这一种，就是会了很多种，到时根据具体需求改动即可：


以上实现了选中哪一项，显示那一项的内容，同时被选中的哪一项样式也发生变化
具体怎么做呢？
首先，创建一个放logo的文件夹，家需要的图片放在文件夹里面，每个选项靓照图片，分别为选中状态和费选中状态
然后，在app.json里面的全局配置"pages"里面配置文件的目录

"pages": [
    "pages/index/index",
    "pages/shopping/shopping",
    "pages/classify/classify",
    "pages/mine/mine"
  ]

配置完文件目录以后会在pages文件夹下面出现四个相应的文件夹，如图
第三步，在app.json里添加全局配置"tabBar"（和pages同级），然后写入以下代码

"tabBar":{
"color": "#333",
"selectedColor": "#FFA500",
"list":[
  {
    "pagePath":"pages/index/index",
    "text":"首页",
    "iconPath":"logos/tab_home_nor.png",
    "selectedIconPath":"logos/tab_home_hig.png"
  },
  {
    "pagePath":"pages/shopping/shopping",
    "text":"购物车",
    "iconPath":"logos/tab_shopping_nor.png",
    "selectedIconPath":"logos/tab_shopping_hig.png"
  },
  {
    "pagePath":"pages/classify/classify",
    "text":"分类",
    "iconPath":"logos/tab_menu_nor.png",
    "selectedIconPath":"logos/tab_menu_hig.png"
  },
  {
    "pagePath":"pages/mine/mine",
    "text":"我的",
    "iconPath":"logos/tab_me_nor.png",
    "selectedIconPath":"logos/tab_me_hig.png"
  }
]

}
每行代码代表的意义

到这里我们就完成了开头看到的页面啦，是不是还是很简单呢？