微信小程序入门篇全局配置 | 页面切换:tabBar配置项
😊tabBar 的介绍
下面引用开发者文档中的介绍:
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
tabBar:翻译为标签栏。
下面展示了两个小程序的 tab 栏,分别是在顶部、底部。
当我们点击不同的栏,就会出现各自对应的页面。这也 tabBar
字段的作用。
😊tabBar 字段的属性介绍
下面依次对重要属性进行讲解,其中最最最主要的属性就是list
了,是一个数组类型的。
❔list
list
是数组类型的,它里面存放的就是一个一个 tab
(首页、订单、我的…这样的),主要包括 tab 的页面路径,tab 图标(这又分点击展示的图标,没点击时展示的图标),tab 文本。只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象。
list 中存放对象的属性如下:
- 必填属性:
pagePath(String)
:页面路径,必须在pages 元素(目录)中定义的。 - 必填属性:
text(String)
:tab 上按钮的文字。 - 非必填:
iconPath(String)
:没有点击展示的图标。icon 大小限制为 40kb,建议尺寸为 81px * 81px。tab 在顶部的时候是不会显示图标的。 - 非必填:
selectedIconPath(String)
:点击后展示的图标。icon 大小限制为 40kb,建议尺寸为 81px * 81px。同样 tab 在顶部的时候不会显示图标的。
测试
- 第一步:准备好图标,如果需要的话
- 第二步:page 页面的准备:
- 第三步:开始写tabBar 字段下的 list 属性配置:
- 第四步:欣赏成果:
点击首页展示的图标:
没点击呢?
❔color 和 selectedColor
我感觉看到这属性名都可以知道个大概了,驼峰式的命名。很清楚感觉。
- color:是表示没有点击展示的字体颜色;
- selectedColor:是表示点击了展示的字体颜色。
注意:它们都是要十六进制颜色类型的。十六进制颜色码表。
❔backgroundColor
定义 tabBar 的背景颜色。
❔position
就定义是顶部 tabBar(标签栏),还是底部。默认是在底部。
咱来看看 top(顶部标签栏) 长什么样吧:
总结
面向文档编程,tabBar 字段也就那么回事嘛!🤣🤣🤣
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiakheb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22