微信小程序 底部标签导航

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

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

问题描述

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

解决方案

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

在App.json:

效果图:

图3.1底部导航标签

代码解释:

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

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

结语

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

END

实习编辑 | 王楠岚

责 编 | 赵 微

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200110A0075M00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券