|
微信小程序写到到导航栏还是非常简单得，就算没有三大框架的基础，也是非常容易理解`的。 接下来我们看看他是如何操作的： 以电商页面中常见的导航为例，会了这一种，就是会了很多种，到时根据具体需求改动即可：   以上实现了选中哪一项，显示那一项的内容，同时被选中的哪一项样式也发生变化 具体怎么做呢？ 首先，创建一个放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"
}
]
} 每行代码代表的意义  到这里我们就完成了开头看到的页面啦，是不是还是很简单呢？
|