1. 什么是 tabBar

    tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:

    • 底部 tabBar
    • 顶部 tabBar



      注意:tabBar中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar 时,不显示 icon,只显示文本
  2. tabBar 的 6 个组成部分
    1. backgroundColor:tabBar 的背景色
    2. selectedIconPath:选中时的图片路径
    3. borderStyle:tabBar 上边框的颜色
    4. iconPath:未选中时的图片路径
    5. selectedColor:tab 上的文字选中时的颜色
    6. color:tab 上文字的默认(未选中)颜色

  3. tabBar 节点的配置项

  4. 每个 tab 项的配置选项

案例:配置 tabBar

  1. 需求描述

    根据资料中提供的小图标、在小程序中配置如图所示的 tabBar 效果:

  2. 实现步骤

    1. 拷贝图标资源
    2. 新建 3 个对应的 tab 页面
    3. 配置 tabBar 选项
  • 步骤1 - 拷贝图标资源

    1. 把资料目录中的 images 文件夹,拷贝到小程序项目根目录中
    2. 将需要用到的小图标分为 3 组,每组两个,其中:
      • 图片名称中包含 -active 的是选中之后的图标
      • 图片名称中不包含 -active 的是默认图标

    截图如下:

  • 步骤2 - 新建 3 个对应的 tab 页面

    通过 app.json 文件的 pages 节点,快速新建 3 个对应的 tab 页面,示例代码如下:



    其中,home 是首页,message 是消息页面,contact 是联系我们页面。

  • 步骤3 - 配置 tabBar 选项

    1. 打开 app.json 配置文件,和 pages、window 平级,新增 tabBar 节点
    2. tabBar 节点中,新增 list 数组,这个数组中存放的,是每个 tab 项的配置对象
    3. 在 list 数组中,新增每一个 tab 项的配置对象。对象中包含的属性如下:
      • pagePath 指定当前 tab 对应的页面路径【必填】
      • text 指定当前 tab 上按钮的文字【必填】
      • iconPath 指定当前 tab 未选中时候的图片路径【可选】
      • selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
  • 完整的配置代码

P32_全局配置 - tabBar的更多相关文章

  1. 小程序基础02:全局配置app.json

    1.配置 我们使用app.json文件来对来微信小程序进行全局配置. 作用:他决定了页面文件的路径,窗口表现,设置网络超时时间,设置多tab等 每一个小程序页面也可以使用 .json 文件来对本页面的 ...

  2. 【微信小程序开发】全局配置

    今天看看小程序全局配置. 上一篇[微信小程序开发]秒懂,架构及框架 配置,无非就是为了增加框架的灵活性,而定下的规则. 微信小程序的配置文件是一个树状结构,各个节点代表不同的配置项,小程序框架会解析这 ...

  3. 微信小程序开发——全局配置详细介绍

    本文针对官方文档未说明清楚的进行详细探索研究,官方文档详见:全局配置 . pages: 删除页面,需要先删除app.json中pages对应页面的路径,再去删除页面相关的所有文件,不然会出现页面文件混 ...

  4. 微信小程序:全局配置app.json

    微信小程序:全局配置app.json 一.全局配置app.json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包 ...

  5. 微信小程序app.json文件常用全局配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段 ...

  6. 微信小程序-全局配置、组件、页面跳转、用户信息等

    全局配置 三个页面 app.json pages字段 "pages":[ "pages/index/index", # 首页 "pages/home/ ...

  7. Keepalived的全局配置

    Keepalived的全局配置 默认配置文件如下: ! Configuration File for keepalived global_defs { notification_email { aca ...

  8. [ionic开源项目教程] - 第5讲 如何在项目中使用全局配置

    第5讲 如何在项目中使用全局配置? Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的.在这里给大家分享一个小技巧,如何在项目中使用全局配置? A:我的 ...

  9. MFC 全局配置 读取保存配置

    不知道关于全局配置别人都是怎么处理的,最近做的东西都用到全局配置,而且要保存软件的设置,下次启动时要使用上次关闭时的配置. 我的做法是建一个类用来保存和读取配置,并且在这个类中创建一些变量,供所有的界 ...

  10. 4、mybatis动态sql+struts2(通配符+全局配置+分页)

    1.创建userinfo.sql数据库脚本 create table USERINFO ( id NUMBER not null, uname ), password ), age NUMBER ) ...

随机推荐

  1. 操作系统课程设计pintos project1实验摘记

    第一部分 项目概述 一.Pintos简介 Pintos是一个基于80x86架构的简单操作系统框架,它支持内核级线程.能够加载和运行用户程序,也拥有文件系统,不过,这些功能均以一种简单的形式实现. 二. ...

  2. linux内核中的likely与unlikely

    前言 内核版本:linux 4.9.x.在linux内核中,经常可以看见if( likely(x))或if( unlikely(x))的语句,本文将基于likely和unlikely的定义和作用进行一 ...

  3. netty系列之:在netty中使用proxy protocol

    目录 简介 netty对proxy protocol协议的支持 HAProxyMessage的编码解码器 netty中proxy protocol的代码示例 总结 简介 我们知道proxy proto ...

  4. 关于Wegame页面空白的问题解决

    前言 前几天帮亲戚家装电脑系统,装好后发现 wegame 所有页面都不能正确加载(全部是空白页面),很神奇,在网上找了很多种解决办法都没有效果,后来不过细心的我发现360浏览器一直提示我证书不安全过期 ...

  5. Java基础知识篇【gitee】

    https://snailclimb.gitee.io/javaguide 一.Java基本功 Java一次编译,字节码通过JVM,处处运行jsp会转化为servlet,也要由jdk编译OracleJ ...

  6. Kubernetes(k8s)存储管理之数据卷volumes(五):动态制备-存储类StorageClass

    目录 一.系统环境 二.前言 三.静态制备和动态制备 四.存储类StorageClass 4.1 存储类StorageClass概览 4.2 StorageClass 资源 五.创建存储类Storag ...

  7. VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案

    一.错误分析 在VUE项目开发中,我们经常会遇到报错: Node Sass version 7.0.1 is incompatible with ^4.0.0. 网上解决方案也千奇百怪,最终操作下来, ...

  8. K8s 为什么会抛弃 docker

    为什么 K8s 会抛弃 docker 前言 CRI containerd 参考 为什么 K8s 会抛弃 docker 前言 在这之前先来了解下,k8s 是如何和 docker 进行交互的. CRI k ...

  9. python之路24之 面向对象动静态方法、继承、派生

    昨日内容回顾 人狗大战 1.直接使用字典表示人和狗 p1 = {} p2 = {} p3 = {} p4 = {} 2.封装产生人和狗的函数 def crreate_person():pass def ...

  10. CF构造题1600-1800(1)

    D. Same Count One(Polynomial Round 2022 (Div. 1 + Div. 2, Rated, Prizes!)) 题意 给定 \(n\) 个长度为 \(m\) 的 ...