小程序配置自定义tabBar及异形tabBar配置操作

什么是tabBar?

小程序的tabbar是指小程序底部的一组固定导航按钮,通常包含2-5个按钮,用于快速切换小程序的不同页面。每个按钮都有一个图标和文本标签,点击按钮可以切换到对应的页面。tabbar通常放置在小程序的底部,以便用户随时查看和使用;通常我们可以在app.json中的tabBar属性中配置tabBar,详见:全局配置-tabBar

如何自定义tabBar?

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。
在自定义 tabBar 模式下

  1. 为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配置项需完整声明,但这些字段不会作用于自定义 tabBar 的渲染。
  2. 此时需要开发者提供一个自定义组件来渲染 tabBar,所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式,以保证 tabBar 层级相对较高。
  3. 与 tabBar 样式相关的接口,如 wx.setTabBarItem 等将失效。
  4. 每个 tab 页下的自定义 tabBar 组件实例是不同的,可通过自定义组件下的 getTabBar 接口,获取当前页面的自定义 tabBar 组件实例。

注意:如需实现 tab 选中态,要在当前页面下,通过 getTabBar 接口获取组件实例,并调用 setData 更新选中态。可参考底部的代码示例。

操作流程

具体在最下方有提供具体示例项目代码

1. 配置信息

在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。
示例:

{"tabBar": {"custom": true,"color": "#000000","selectedColor": "#000000","backgroundColor": "#000000","list": [{"pagePath": "page/component/index","text": "组件"}, {"pagePath": "page/API/index","text": "接口"}]},"usingComponents": {}
}

2. 添加 tabBar 代码文件

在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. 编写 tabBar 代码

用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例

如何制作异形tabBar?

比如这种中间突出的
在这里插入图片描述

操作思路:

通过定位等将其移动到需要的位置,但有一点需要注意:如果用的是相对定位,给图片设置大于34.67px的高度时,要使用min-height

示例项目

微信小程序示例-tabBar

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/20212.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 权限分组

在权限设计时,分为部门、岗位、人员三部分, 人员下面挂部门,部门下面挂岗位,岗位下面挂菜单,用户在进行授权时,勾选了操作权限,默认数据权限也进行勾选。 权限组:查询、新增、修改、…

开发一套家政上门预约服务系统需要运用的关键技术

家政上门预约服务系统开发是指建立一个在线平台或应用程序,用于提供家政服务的预约和管理功能。该系统的目标是让用户能够方便地预约各种家政服务,如保洁、家庭护理、月嫂、家电维修等,并实现服务供应商管理和订单管理等功能。 开发一套家政上…

01Linux以及操作系统概述

课程目标 1.了解现代操作系统的整体构成及发展历史 2.了解Linux操作系统及其分支版本 3.直观上理解服务器端与桌面端版本的区别 课程实验 1.通过对CentOS和Ubuntu的演示,直观理解Linux与Windows的异同 课堂引入 本章内容主要为大家详细讲解Linux操作系统(以下简…

PPT 隐藏开启对象图层

目录预览 一、问题描述二、解决方案三、参考链接 一、问题描述 制作PPT的时候,有时候需要在一张PPT放置多个依次出现的内容,然后设置对应的动画,要是需要对某个内容进行修改的话,就会很不方便,这个时候就需要使用&…

flutter 自定义本地化-GlobalMaterialLocalizations(重写本地化日期转换)

1. 创建自定义 GlobalMaterialLocalizations import package:flutter_localizations/flutter_localizations.dart; import package:kittlenapp/utils/base/date_time_util.dart;///[auth] kittlen ///[createTime] 2024-05-31 11:40 ///[description]class MyMaterialLocaliza…

基于SpringBoot的旅游攻略信息系统的设计与实现

文档介绍 用户群体 针对已经学习过SpringBoot的同学,希望通过一个项目来加强对框架的应用能力,增加项目经验 针对需要完成大学期间的毕设项目的同学,可以通过此文档了解整个系统技术架构,为自己的毕设论文提供指导性建议 文档内容 此文档内容可以让学习此实战项目的同学有一…

有效2,关闭 Microsoft Defender 实时保护,u盘启动进入pe

将以下文件夹改名 “C:\Program Files\Windows Defender” “C:\Program Files\Windows Defender Advanced Threat Protection” “C:\Program Files (x86)\Windows Defender” “C:\ProgramData\Microsoft\Windows Defender” “C:\ProgramData\Microsoft\Windows Securi…

webshell代码免杀

1.什么是WAF? Web Application Firewal(web应用防火墙),web应用防火通过执行一系列针对HTTP/HTTPS的安全策略来专门为web应用提供保护的一款产品,基本可以分为以下4种 软件型WAF:以软件的形式安装在服务器上面,可以接触到服务器…

Java高级---Spring Boot---4核心概念

4 核心概念 4.1 Spring Boot的自动配置详解 自动配置 是 Spring Boot 的核心特性之一,它允许框架根据项目中添加的依赖自动配置应用程序。 EnableAutoConfiguration: 这个注解是自动配置的入口点,它告诉 Spring Boot 根据类路径上的库来自动配置 Spri…

MAB规范(1):概览介绍

前言 MATLAB的MAAB(MathWorks Automotive Advisory Board)建模规范是一套由MathWorks主导的建模指南,旨在提高基于Simulink和Stateflow进行建模的代码质量、可读性、可维护性和可重用性。这些规范最初是由汽车行业的主要厂商共同制定的&…

c#基础()

学习目标 了解:嵌套类,匿名类,对象初始化器 重点:类的定义以及对象,构造方法,this和static关键字 掌握:面向对象的概念,访问修饰符,垃圾回收 面向对象 面向对象的概…

2024年5月月终总结

一转眼4月份又过去了,按照年初的承诺,每月照例要写一个月总结,简单回顾下: 1) 英语学习继续进行: 百词斩: 不背单词: 每日英语听力: 2)中医学习每天15分钟,没有中断。 …

xxl-job的使用

介绍 在分布式中,很多微服务可能存在多实例部署的现象,如果在某个具体的微服务中实现一个定时任务,而该微服务存在多个实例的话,那么会导致该定时任务在不同实例中都会进行执行!这很容易导致脏数据、数据重复等问题&am…

低代码与大模型时代:技术的进化与人工智能的普及

在当前快速发展的技术环境中,低代码和大模型成为了推动技术创新和人工智能普及的关键因素。低代码开发平台使得软件开发变得更简单和高效,大模型则提供了更强大的智能能力。这篇文章将探讨低代码和大模型在技术领域的应用,以及它们对于普通用…

远程继电器模块实现(nodemcu D1 + 继电器)

前言 接下来将实现一个远程继电器,实时远程控制和查询的开关状态。用 5v 直流电控制 220v 交流电。 硬件上: 使用 nodemcu D1 和 JQC-3FF-S-Z 继电器。 软件上: 使用 nodejs 作为服务端,和 html 作为客户端。 在开始之前在电脑…

Scrapy vs. Beautiful Soup | 网络抓取教程 2024

网络爬虫是任何想要从网上收集数据用于分析、研究或商业智能的人必备的技能。Python中两个最受欢迎的网络爬虫工具是Scrapy和Beautiful Soup。在本教程中,我们将比较这些工具,探索它们的功能,并指导你如何有效地使用它们。此外,我…

精雕细琢,B 端 UI 设计展典雅风范

精雕细琢,B 端 UI 设计展典雅风范

医学图像处理质量的评价方法

评判处理后医学图像的质量是确保图像处理技术有效性和可靠性的关键。以下是一些常用的图像质量评估方法和指标: 1. 主观评估 主观评估是由专业人员(如放射科医生)通过视觉检查对图像质量进行评分。常用的主观评估方法包括: 视觉…

CC工具箱使用指南:【山西省村规结构调整表(亦求长生亦求你)】

一、简介 群友定制工具。 工具根据输入的用地图层,生成山西村规的结构调整表。 和一般的用地表有些不一样的地方是,现状和规划字段都在同一个图层里。 并且还有一个【村庄名称】的字段,可以将多个村庄放在一个图层中,一次性生…

【网络研究观】-20240531

战争揭开美国武器优势的面纱 随着俄军在哈尔科夫地区稳步推进,乌克兰战争对美国国防机器而言是一场灾难,这一点越来越明显,这不仅是因为我们的援助未能挽救乌克兰的撤退和可能的失败。更重要的是,这场战争无情地暴露了我们国防体…