微信小程序全局配置之tabBar实战案例

目录
  • 全局配置 - tabBar
    • 1. 什么是 tabBar
    • 2. tabBar 的 6 个组成部分
    • 3. tabBar 节点的配置项
    • 4. 每个 tab 项的配置选项
  • 全局配置 - 案例：配置 tabBar
    • 1. 需求描述
    • 2. 实现步骤
    • 3. 步骤1 - 拷贝图标资源
    • 4.步骤2 - 新建 3 个对应的 tab 页面
    • 5. 步骤3 - 配置 tabBar 选项
    • 6. 完整的配置代码
  • 总结

全局配置 - tabBar

1. 什么是 tabBar

tabBar 是移动端应用常见的页面效果， 用于实现多页面 的快速切换 。

小程序中通常将其分为：

  • 底部 tabBar
  • 顶部 tabBar

注意： tabBar中只能配置最少 2 个、最多 5 个 tab 页签 当渲染顶部 tabBar 时，不显示 icon，只显示文本

2. tabBar 的 6 个组成部分

① backgroundColor：tabBar 的背景色

② selectedIconPath：选中时的图片路径

③ borderStyle：tabBar 上边框的颜色

④ iconPath：未选中时的图片路径

⑤ selectedColor：tab 上的文字选中时的颜色

⑥ color：tab 上文字的默认（未选中）颜色

3. tabBar 节点的配置项

属性 类型 必填 默认值 描述
position String 否 bottom tabBar 的位置，仅支持 bottom/top
borderStyle String 否 black tabBar 上边框的颜色，仅支持 black/white
color HexColor 否   tab 上文字的默认（未选中）颜色
selectedColor HexColor 否   tab 上的文字选中时的颜色
backgroundColor HexColor 否   tabBar 的背景色
list Array 是  
tab 页签的列表，

最少 2 个、最多 5 个 tab

4. 每个 tab 项的配置选项

属性 类型 必填 描述
pagePath String 是 页面路径，页面必须在 pages 中预先定义
text String 是 tab 上显示的文字
iconPath String 否 未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedIconPath String 否 选中时的图标路径；当 postion 为 top 时，不显示 icon

全局配置 - 案例：配置 tabBar

1. 需求描述

根据素材中提供的小图标、 在小程序中配置如图所示的 tabBar 效果：

素材：  

2. 实现步骤

① 拷贝图标资源

② 新建 3 个对应的 tab 页面

③ 配置 tabBar 选项

3. 步骤1 - 拷贝图标资源

① 把资料目录中的 images 文件夹， 拷贝到小程序项目根目录中

② 将需要用到的小图标分为 3 组，每组两个，其中：

图片名称中 包含 -active 的是选中之后 的图标

图片名称中 不包含 -active 的是 默认图标

截图如下：

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

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

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

5. 步骤3 - 配置 tabBar 选项

① 打开 app.json 配置文件，和 pages、window 平级，新增 tabBar 节点

② tabBar 节点中，新增 list 数组 ，这个数组中存放的，是每个 tab 项的配置对象

③ 在 list 数组中， 新增每一个 tab 项的配置对象 。对象中包含的属性如下：

  • pagePath 指定当前 tab 对应的页面路径 【 必填 】
  • text 指定当前 tab 上按钮的文字【 必填 】
  • iconPath 指定当前 tab 未选中时候的图片路径【可选】
  • selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

6. 完整的配置代码

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f12321",
    "navigationBarTitleText": "测试",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

总结

到此这篇关于微信小程序全局配置之tabBar的文章就介绍到这了,更多相关微信小程序全局配置tabBar内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序 开发之全局配置

    微信小程序 开发之全局配置

    一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 注意在.json不能注释,否则会出错. 二.工具栏tabBar 如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. tabBar 是一个数组,只能配置最少2个.最多5个 tab,tab 按数组的顺序排序 app.js

  • 微信小程序开发之全局配置与页面配置实现

    微信小程序开发之全局配置与页面配置实现

    目录 一.全局配置 (1)小程序窗口的组成部分 (2)导航栏  navigationBar (3)下拉刷新页面 (4)上拉触底的距离 (5)底部导航栏 tabBar (6)图标的获取 二.页面配置 (1)概念 (2)页面配置与全局配置的关系 (3)常用配置项 三.综合案例 一.全局配置 app.json文件就是项目的全局配置文件 (1)小程序窗口的组成部分 (2)导航栏  navigationBar 1)window节点常用配置项 2)设置导航栏 设置导航栏标题文字 app.json-->win

  • 微信小程序全局配置以及页面配置详解

    微信小程序全局配置以及页面配置详解

    目录 全局配置 全局配置文件及常用配置项 全局配置—window 小程序窗口组成部分 了解window节点常用的配置项 设置导航栏的标题 设置导航栏的背景色 设置导航栏的标题颜色 全局开启下拉刷新功能 设置下拉刷新时窗口的背景色 设置下拉刷新时loading的样式 设置上拉触底的距离 全局配置—tabbar 什么是tabbar tabbar的6个组成部分 tabbar节点的配置项 每个tab项的配置选项 页面配置 页面配置文件的作用 页面配置和全局配置的关系 页面配置中常用的配置项 小结 全局配

  • 微信小程序全局配置之tabBar实战案例

    微信小程序全局配置之tabBar实战案例

    目录 全局配置 - tabBar 1. 什么是 tabBar 2. tabBar 的 6 个组成部分 3. tabBar 节点的配置项 4. 每个 tab 项的配置选项 全局配置 - 案例:配置 tabBar 1. 需求描述 2. 实现步骤 3. 步骤1 - 拷贝图标资源 4.步骤2 - 新建 3 个对应的 tab 页面 5. 步骤3 - 配置 tabBar 选项 6. 完整的配置代码 总结 全局配置 - tabBar 1. 什么是 tabBar tabBar 是移动端应用常见的页面效果, 用于

  • 详解微信小程序工程化探索之webpack实战

    详解微信小程序工程化探索之webpack实战

    前言 微信小程序因为其便捷的使用方式,以极快的速度传播开来吸引了大量的使用者.市场需求急剧增加的情况下,每家互联网企业都想一尝甜头,因此掌握小程序开发这一技术无疑是一名前端开发者不可或缺的技能.但小程序开发当中总有一些不便一直让开发者诟病不已,主要表现在: 初期缺乏方便的npm包管理机制(现阶段确实可以使用npm包,但是操作确实不便) 不能使用预编译语言处理样式 无法通过脚本命令切换不同的开发环境,需手动修改对应环境所需配置(常规项目至少具备开发与生产环境) 无法将规范检查工具结合到项目工程中(

  • 微信小程序全局数据共享和分包图文详解

    微信小程序全局数据共享和分包图文详解

    目录 引言 全局数据共享 安装 MobX 相关的包 创建Store实例 将 Store 中的成员绑定到页面中 在页面使用 Store 中的成员 将 Store 成员绑定到组件中 在组件中使用 Store 中的成员 分包 分包的项目构成: 分包的加载规则: 分包的体积限制: 创建分包 打包原则 分包的引用原则 独立分包 独立分包的引用原则 分包预下载 总结 引言 经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序专栏,主要想从移动端开发方向进一步发展,而对于我

  • 微信小程序全局状态的深入讲解

    微信小程序全局状态的深入讲解

    前言 在微信小程序中,可以利用 App.js 的 globalData 作为中间桥梁,在 Page, Component 之间,包括页面与页面,页面与组件,组件与组件之间传递需要传递的信息.但是,我们不能及时的知道 globalData 下的变化,在新建小程序的官方的默认事例中,获取 UserInfo 这一网络操作有延迟的,为此写了很多不必要的代码.就连官方案例都存在这一情况,相信在开发中你也会遇到类似的情况.在本文中将介绍如何解决这一类问题. 需求分析 相信以下情况是我们在没有全局状态管理下常

  • uniapp 实现微信小程序全局分享的示例代码

    uniapp 实现微信小程序全局分享的示例代码

    目录 创建全局分享内容文件 引入并全局注册该文件 自定义页面分享内容  uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能.主要使用 Vue.js 的 全局混入 概念. 下面直接上 实现步骤和代码: 创建全局分享内容文件 1.创建一个全局分享的 js 文件.示例文件路径为:@/common/share.js ,在该文件中定义全局分享的内容: export default { data() { return { // 默认的全局分享内容 share: { title: '全局分享的标

  • 微信小程序全局文件的使用详解

    微信小程序全局文件的使用详解

    目录 全局文件 总结 我们前边两篇介绍了账号的申请.注册,工具的安装,云服务的开通.本篇我们介绍一下基础语法.介绍的方法呢我们会结合上微搭低代码的工具一起做个对比.因为低代码工具也产生了非常多的技术概念,但最终在发布成小程序的时候也是按照微信的规范去生成的,把微信开发者工具学会了也可以更深入的了解低代码的相关概念. 全局文件 小程序中是分为全局和页面级两部分.全局是在小程序的所有页面都有效,页面级是只在当前页面中生效.小程序根目录有三个文件app.js.app.json.app.wxss这三个就

  • 微信小程序自定义渐变的tabbar导航栏功能

    微信小程序自定义渐变的tabbar导航栏功能

    做为自己的一个小笔记,以免后面再用到 1,在需要自定义的界面的json文件中加入下面代码 "navigationStyle": "custom" ,隐藏系统导航栏 { "navigationBarTitleText": "", "navigationBarBackgroundColor": "#000", "navigationBarTextStyle": "

  • 微信小程序开发之自定义tabBar的实现

    最近开发微信小程序,公司要求做一个类似闲鱼的tabbar,但是网上大多资料的tabbar都会在页面切换的时候重新渲染,所以我写了一个不会重新渲染的tabbar,有需要的直接拿走不谢.https://github.com/SuRuiGit/wxapp-customTabbar 在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页

  • 一次微信小程序内地图的使用实战记录

    一次微信小程序内地图的使用实战记录

    前言    今天在做新需求的时候发现个很尬的问题:我们项目的小程序是直接输入账号密码进行登录的,不是平常的获得用户授权登录的模式,所以当我使用wx.getLocation一直拉不下来授权一直进fail不去success的时候我开始慌了 我以为是由于这个登录模式不同导致,然后我就开始疯狂骚扰我的小伙伴,问是不是这种登录模式会拉不到用户授权(在这里感谢我的小伙伴们没打死我,反而认真给我解惑),后来我清了下开发者工具缓存就能拉下来了(在这里求求TX的大佬们再做做开发者工具的优化吧,写原生的真的要流泪了

随机推荐