现在每一个app首页都会有一个底部的导航栏，微信小程序也不例外，这篇文章就会进行一个简单导航栏的编写，现在编写一个底部导航栏包含"首页","信息","我的"三栏的导航栏。
针对编写导航栏之前我们需要准备几张图片作为导航栏的配图，推荐去阿里巴巴矢量图标库 去下载"首页","信息","我的"的配图，介意每个栏目下载两张同样样式，颜色不同的图片，以做导航栏选中，未选中之分，下载文件后进行重命名，下载图片时顺便将起对应的色值也便记下来，以备设置导航栏字体时使用，（#1afa29 #8a8a8a）。
3-1.png
在项目中创建放置图片的文件夹images，将下载好的图片放置到该文件夹之下；
3-2.png
3-3.png
创建首页，信息，我的三个栏目对应的页面文件,并在app.json页面进行注册
3-4.png
app.js页面注册代码：
"pages":[
"pages/index/index",
"pages/message/message",
"pages/mine/mine"
]
注册完成后则在app.js文件中编写导航栏，导航栏在小程序中使用官方提供的tabBar
tab属性：
- "color"未激活状态下文字的颜色
- "selectedColor" tab文字激活的颜色
- "borderStyle" tabbar上边框的夜色
- "backgroundColor" tab的背景颜色
- "pagePath"页面的路径
- "text" tab上显示的文字
- "iconPath" tab上显示的默认的未激活的图标路径
- "selectedIconPath" tab上显示的默认的激活的图标路径
app.js文件代码
{
"pages":[
"pages/index/index",
"pages/message/message",
"pages/mine/mine"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar": {
"color": "#8a8a8a",
"selectedColor": "#1afa29 ",
"borderStyle": "black",
"backgroundColor": "white",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/tab_index_normal.png",
"selectedIconPath": "images/tab_index_selected.png"
},{
"pagePath": "pages/message/message",
"text": "信息",
"iconPath": "images/tab_message_normal.png",
"selectedIconPath": "images/tab_message_selected.png"
},{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "images/tab_mine_normal.png",
"selectedIconPath": "images/tab_mine_selected.png"
}]
}
}
涉及到导航栏跳转指定页面代码如下：
index.wxml
<view class='container'>
<text>首页</text>
</view>
message.wxml
<view class='container'>
<text>信息</text>
</view>
mine.wxml
<view class='container'>
<text>我的</text>
</view>
编写完成进行项目的编译，编译完成则可以看到一个简单的导航栏就完成了！
3-5.png
