【原】微信小程序|底部标签导航

问题描述

底部标签导航可以说是任何一个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也是数组，但添加的却是页面路径。

END

实习编辑   |   王楠岚

责       编   |   赵    微

 where2go 团队

---

微信号：算法与编程之美