P32_全局配置 - tabBar
- 什么是 tabBar
tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:- 底部 tabBar
- 顶部 tabBar
注意:tabBar中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar 时,不显示 icon,只显示文本
- tabBar 的 6 个组成部分
- backgroundColor:tabBar 的背景色
- selectedIconPath:选中时的图片路径
- borderStyle:tabBar 上边框的颜色
- iconPath:未选中时的图片路径
- selectedColor:tab 上的文字选中时的颜色
- color:tab 上文字的默认(未选中)颜色
- tabBar 节点的配置项
- 每个 tab 项的配置选项
案例:配置 tabBar
需求描述
根据资料中提供的小图标、在小程序中配置如图所示的 tabBar 效果:
实现步骤
- 拷贝图标资源
- 新建 3 个对应的 tab 页面
- 配置 tabBar 选项
步骤1 - 拷贝图标资源
- 把资料目录中的 images 文件夹,拷贝到小程序项目根目录中
- 将需要用到的小图标分为 3 组,每组两个,其中:
- 图片名称中包含 -active 的是选中之后的图标
- 图片名称中不包含 -active 的是默认图标
截图如下:
步骤2 - 新建 3 个对应的 tab 页面
通过 app.json 文件的 pages 节点,快速新建 3 个对应的 tab 页面,示例代码如下:
其中,home 是首页,message 是消息页面,contact 是联系我们页面。步骤3 - 配置 tabBar 选项
- 打开 app.json 配置文件,和 pages、window 平级,新增 tabBar 节点
- tabBar 节点中,新增 list 数组,这个数组中存放的,是每个 tab 项的配置对象
- 在 list 数组中,新增每一个 tab 项的配置对象。对象中包含的属性如下:
- pagePath 指定当前 tab 对应的页面路径【必填】
- text 指定当前 tab 上按钮的文字【必填】
- iconPath 指定当前 tab 未选中时候的图片路径【可选】
- selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
完整的配置代码
P32_全局配置 - tabBar的更多相关文章
- 小程序基础02:全局配置app.json
1.配置 我们使用app.json文件来对来微信小程序进行全局配置. 作用:他决定了页面文件的路径,窗口表现,设置网络超时时间,设置多tab等 每一个小程序页面也可以使用 .json 文件来对本页面的 ...
- 【微信小程序开发】全局配置
今天看看小程序全局配置. 上一篇[微信小程序开发]秒懂,架构及框架 配置,无非就是为了增加框架的灵活性,而定下的规则. 微信小程序的配置文件是一个树状结构,各个节点代表不同的配置项,小程序框架会解析这 ...
- 微信小程序开发——全局配置详细介绍
本文针对官方文档未说明清楚的进行详细探索研究,官方文档详见:全局配置 . pages: 删除页面,需要先删除app.json中pages对应页面的路径,再去删除页面相关的所有文件,不然会出现页面文件混 ...
- 微信小程序:全局配置app.json
微信小程序:全局配置app.json 一.全局配置app.json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包 ...
- 微信小程序app.json文件常用全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段 ...
- 微信小程序-全局配置、组件、页面跳转、用户信息等
全局配置 三个页面 app.json pages字段 "pages":[ "pages/index/index", # 首页 "pages/home/ ...
- Keepalived的全局配置
Keepalived的全局配置 默认配置文件如下: ! Configuration File for keepalived global_defs { notification_email { aca ...
- [ionic开源项目教程] - 第5讲 如何在项目中使用全局配置
第5讲 如何在项目中使用全局配置? Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的.在这里给大家分享一个小技巧,如何在项目中使用全局配置? A:我的 ...
- MFC 全局配置 读取保存配置
不知道关于全局配置别人都是怎么处理的,最近做的东西都用到全局配置,而且要保存软件的设置,下次启动时要使用上次关闭时的配置. 我的做法是建一个类用来保存和读取配置,并且在这个类中创建一些变量,供所有的界 ...
- 4、mybatis动态sql+struts2(通配符+全局配置+分页)
1.创建userinfo.sql数据库脚本 create table USERINFO ( id NUMBER not null, uname ), password ), age NUMBER ) ...
随机推荐
- K8s如何启用cgroup2支持?
什么是 cgroup ️Reference: control groups(控制组),通常被称为cgroup,是Linux内核的一项功能.它允许将进程组织成分层的组,然后限制和监控各种资源的使用. 内 ...
- 【云原生 · Kubernetes】搭建Harbor仓库
[云原生 · Kubernetes]Kubernetes基础环境搭建 接着上次的内容,后续来了! 4.部署Harbor仓库 在master节点执行脚本k8s_harbor_install.sh即可完成 ...
- RabbitMq了解
RibbitMQ MQ优势 MQ的三大主要作用: 应用解耦.异步提速.流量削锋 应用解耦 系统的耦合性越高,容错性就越低,可维护性就越低: 解耦: 如果其中一个系统服务宕机,那么系统的其他服务将也无法 ...
- Py2neo:一种快速导入百万数据到Neo4j的方式
Py2neo:一种快速导入百万数据到Neo4j的方式 Py2neo是一个可以和Neo4j图数据库进行交互的python包.虽然py2neo操作简单方便,但是当节点和关系达几十上百万时,直接创建和导入节 ...
- ob-myfreemp3
网站 aHR0cDovL3Rvb2wubGl1bWluZ3llLmNuL211c2ljLw== 打开之后随便搜一个歌手的名字或歌曲(这里搜林俊杰) m/api/search,可以看到数据全在这里 全 ...
- js将数组内属性值相同的项合并成二维数组
var ary=[ {"RaDate":'2021-09-08',"Type":'Morning1','title':'测试1'}, {"RaDate ...
- C++进阶(位图+布隆过滤器的概念和实现+海量数据处理)
位图 概念 位图: 所谓位图,就是用每一位来存放某种状态,适用于海量数据,数据无重复的场景.通常是用来判断某个数据存不存在的. 适用场景: 如果我们需要对大量的数据进行处理,判断该数据在不在,比如40 ...
- 本机无法配置远程服务器上的MySQL ODBC连接驱动
1.问题描述 我想要访问远程windows服务器上的MySQL数据库,因此需要在本地ODBC驱动上配好远程服务器的MySQL.但配置好基本信息后,测试的时候出现如下问题: 2.解决方法 之所以产生这种 ...
- [OpenCV实战]42 数码单反相机的技术细节
在这篇文章中,我们将说明数码单反相机DSLR(Digital Single Lens Reflex Camera)的各个技术方面.本文将说明焦距(focal length),f-stop,景深(dep ...
- [数学理论] NP问题解释
转载自http://m.blog.csdn.net/csshuke/article/details/74909562 希望通过这篇文章可以不仅让计算机相关专业的人可以看懂和区分什么是P类问题什么是NP ...