微信小程序 底部标签导航

欢迎点击「算法与编程之美」关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

底部标签导航可以说是任何一个APP的标配，那么该如何设置底部标签导航呢？

解决方案

制作标签导航首先需要我们自己将找到的图片保存进目录文件夹里，小程序界面会自动更新，然后再在App.json配置文件。

在App.json:

效果图：

图3.1底部导航标签

代码解释：

tabBar是一个对象，可以配置标签导航文字的默认和选中颜色，导航背景色、上边框色，上边框色有black和white两种。

list是一个数组，可以存放标签导航。list里的每个对象分别对应一个标签导航。

结语

App.json文件可以配置页面路径、窗口表现、标签导航、网络超时和debug模式，而制作标签导航需要在App.json里配置tabBar属性来设置导航文字和背景等颜色，以及添加list数组来配置标签导航的路径、名称以及图标。要注意虽然pages也是数组，但添加的却是页面路径。

END

实习编辑 | 王楠岚

责 编 | 赵 微