先上效果图，让读者知道这篇文章要干啥：
图1 自定义标题栏效果图
前面的文章，我们已经介绍了如何设置标题，标题的颜色、背景颜色、下拉刷新等内容。今天我们再来学习一下如何设置个性化的标签栏。
1.自定义标签栏
我们前面的文章介绍过，在微信小程序中，可以自定义标题栏的颜色。但是颜色只能为十六进制颜色码，而且用单一的颜色作为标题，显得内容很枯燥。为满足更多用户需求，小程序中给出了一个navigationStyle属性。navigationStyle 仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮。下面我们给出具体的代码：
图2-1 app.json文件代码
图2-2 wxml文件代码
app.json文件中，给出"navigationStyle":"custom"属性：
{"pages":[
"pages/index/index",
"pages/logs/logs"],
"window":{
"backgroundColor": "#29B6EB",
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#f01450",
"navigationBarTextStyle":"white",
"navigationStyle":"custom"},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000},
"debug": true}
.wxml文件：
<view class="container" >
<image src= "图片的地址" mode=widthFix></image>
</view>
给出效果图：
图3-1 效果图1
可以发现给出的效果图与图1不太一样，顶部并没有置顶，还留有空白。如果需要将顶部的空白去掉，需要在.wxml文件中，给最外层的view组件，加上属性style="padding-top:0px"，如图所示：
图3-2 .wxml文件代码
效果图：
图3-3 效果图2
2. 底部导航栏
首先给出效果图：
图4 底部导航栏效果图
首先准备素材，在pages目录下新建文件夹images，如图所示：
图5-1 图片素材
具体图片的样式：
图5-2 图片素材
该需要在pages文件下新建一个页面文件（别忘了之前文章中提到过的，新建页面，需要在app.json中配置），如图所示：
图5-3 新建一个页面
新建的页面用于切换展现效果，代码有index页面文件中的代码相类似，这里不再赘述。
代码实现，首先再app.json文件中，需要加上tabBar属性：
图6-1 app.json文件代码构成
{"pages":[
"pages/index/index",
"pages/myself/myself",
"pages/logs/logs"],
"window":{
"backgroundColor": "#29B6EB",
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#f01450",
"navigationBarTextStyle":"black",
"navigationStyle":"custom"},
"tabBar": {
"color": "#aaa",
"selectedColor": "#d33a31",
"borderStyle": "white",
"backgroundColor": "#f8f8f8",
"list": [
{"pagePath": "pages/index/index",
"iconPath": "pages/images/tb1_off.png",
"selectedIconPath": "pages/images/tb1_on.png",
"text": "报名"},
{"pagePath": "pages/myself/myself",
"iconPath": "pages/images/tb3_off.png",
"selectedIconPath": "pages/images/tb3_on.png",
"text": "我的"}]},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000},
"debug": true}
实现的效果图，如图4所示。
总结
本文介绍了自定义标题栏，和底部导航栏，关于导航栏，等后期介绍了自定义组件，我们再学习一下，如何自定义更加酷炫的导航栏。
希望对您的学习有所帮助，谢谢你！
