微信小程序|底部标签导航
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
底部标签导航可以说是任何一个APP的标配，那么该如何设置底部标签导航呢？
解决方案
制作标签导航首先需要我们自己将找到的图片保存进目录文件夹里，小程序界面会自动更新，然后再在App.json配置文件。
在App.json:
{
"pages": [
"pages/movie/movie",
"pages/cinema/cinema",
"pages/find/find",
"pages/me/me"
],
"tabBar": {
"selectedColor": "#D53E37",
"backgroundColor": "#f5f5f5",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/movie/movie",
"text": "电影",
"iconPath": "pages/images/video.png",
"selectedIconPath": "pages/images/video (1).png"
},
{
"pagePath": "pages/cinema/cinema",
"text": "影院",
"iconPath": "pages/images/search.png",
"selectedIconPath": "pages/images/search (1).png"
},
{
"pagePath": "pages/find/find",
"text": "发现",
"iconPath": "pages/images/add_friend.png",
"selectedIconPath": "pages/images/add_friend (1).png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "pages/images/star.png",
"selectedIconPath": "pages/images/star(1).png"
}
]
},
"sitemapLocation": "sitemap48.json"
}
效果图：
图3.1底部导航标签
代码解释：
tabBar是一个对象，可以配置标签导航文字的默认和选中颜色，导航背景色、上边框色，上边框色有black和white两种。
list是一个数组，可以存放标签导航。list里的每个对象分别对应一个标签导航。
结语
App.json文件可以配置页面路径、窗口表现、标签导航、网络超时和debug模式，而制作标签导航需要在App.json里配置tabBar属性来设置导航文字和背景等颜色，以及添加list数组来配置标签导航的路径、名称以及图标。要注意虽然pages也是数组，但添加的却是页面路径。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-01-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读