作者: 老葛 亚艾元软件
我后来,试用了以前其它小程序,大部分小程序,底部都有一个好用的tab导航。特别是参考了微信小程序数据助手的导航设计。对比一下,原来的首页几个图标的设计,已经太丑了,而且当时那几个图标,也都是用的同一个,非常不美观。
新的改版,其中的重要的改进就是增加底部的tab导航,还有顶部的tab导航。这是改进后的样子:
图8-2-13-1
实现底部的导航,我们需要修改小程序的app.json文件:
{
"pages":[
"pages/qipus/qipus",
"pages/index/index",
"pages/search/search",
"pages/qipus/qipuitem",
"pages/players/players",
"pages/players/playeritem",
"pages/opening/opening",
"pages/opening/openinglist",
"pages/events/events",
"pages/events/eventlist",
"pages/my/my",
"pages/my/aboutus",
"pages/my/myshares",
"pages/my/myfavorites",
"pages/my/myreads",
"pages/my/mysettings",
"pages/news/news",
"pages/news/newsitem"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "亚艾元象棋",
"navigationBarTextStyle":"black"
},
"tabBar": {
"color": "#6e6d6b",
"selectedColor": "#0C8EE9",
"borderStyle": "white",
"backgroundColor": "#fff",
"box-shadow":"0 0 6px 0",
"font-size":"20px",
"list": [{
"pagePath": "pages/qipus/qipus",
"iconPath": "images/nav/chip-off.png",
"selectedIconPath": "images/nav/chip-on.png",
"text": "棋谱"
}, {
"pagePath": "pages/news/news",
"iconPath": "images/nav/dynamic-off.png",
"selectedIconPath": "images/nav/dynamic-on.png",
"text": "动态"
},{
"pagePath": "pages/search/search",
"iconPath": "images/nav/search-off.png",
"selectedIconPath": "images/nav/search-on.png",
"text": "搜索"
}, {
"pagePath": "pages/my/my",
"iconPath": "images/nav/my-off.png",
"selectedIconPath": "images/nav/my-on.png",
"text": "我的"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
}
}
这里使用tabBar参数,设置底部导航,是小程序推荐的方式。在这个参数下面,有这么一些参数可供使用:
"color": "#6e6d6b",
"selectedColor": "#0C8EE9",
"borderStyle": "white",
"backgroundColor": "#fff",
"box-shadow":"0 0 6px 0",
"font-size":"20px",
用来控制底部导航的样式,比如颜色、选中颜色、背景颜色、字体大小、边框样式、阴影效果.
里面的list包含一个数组。里面包含每个tab的设置。对于每个tab,我们可以设置下面几个选项:
"pagePath": "pages/qipus/qipus",
"iconPath": "images/nav/chip-off.png",
"selectedIconPath": "images/nav/chip-on.png",
"text": "棋谱"
pagePath:小程序页面路径
Text:tab标签文本
iconPath:图标路径
selectedIconPath:选中图标路径。
为了让我们的图标更漂亮,我们还制作了一组图标:
图8-2-13-2
图标分两种,一种是未选中的样子,一种是选中后的样子,通常选中后的要突出显示。
个人页面的之后,我们后面再介绍,先把这个tab实现了。