小程序配置自定义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,一经查实,立即删除!

相关文章

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

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

01Linux以及操作系统概述

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

PPT 隐藏开启对象图层

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

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

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

webshell代码免杀

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

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 设计展典雅风范

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

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

【网络研究观】-20240531

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

Nginx一个端口代理多个vue项目,通过不同路由转到不同系统,反向代理Apache进行文件处理

需求:由于一些因素限制,需要尽可能的少开放外部端口访问,这里将多个vue项目通过一个nginx端口进行代理,由不同的路由来确定访问哪些项目,apache同理 nginx代理多个vue项目 安装和配置nginx的基础教程这里就不写了&…

thinkphp6 queue队列的maxTries自定义

前景需求:在我们用队列的时候发现maxtries的个数时255次,这个太影响其他队列任务 我目前使用的thinkphp版本是6.1 第一部定义一个新的类 CustomDataBase(我用的mysql数据库存放的队列) 重写__make 和createPlainPayload方法 …

前端功能拖拽篇:dragleave拖拽事件穿透子元素的优雅解决方案

文章目录 前情提要应用场景⭐拖拽改变元素位置⭐拖拽改变目标区域的样式⭐dragleave拖拽事件穿透子元素的优雅解决方案 最后 前情提要 在前端工作过程中,避免不了要接触各种技术,拖拽就是其中一个,大部分关于拖拽的基础知识和Demo都在MDN中写…

day-36 删除链表的倒数第 N 个结点

思路 首先计算出链表的长度,然后删除第n个节点即可,但要注意考虑特殊情况 解题方法 特殊情况:1.删除节点为最后一个节点 2.删除节点为头结点 Code /*** Definition for singly-linked list.* public class ListNode {* int val;* …

Go-知识并发控制Context

Go-知识并发控制Context 1. 介绍2. 实现原理2.1 接口定义2.2 Deadline()2.3 Done()2.4 Err()2.5 Value() 3. 空 context4. cancelCtx4.1 Done()4.2 Err()4.3 cancel()4.4 WithCancel4.5 例子4.6 总结 5. timerCtx5.1 Deadline5.2 cancel5.3 WithDeadline5.4 WithTimeout5.5 例子…

HTML+CSS+JS 熊猫登录表单

效果演示 实现了一个可爱的熊猫登录界面,页面背景使用了渐变色,熊猫的头部和身体使用了圆形和椭圆形的边框,使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局,包括用户名和密码的输入框和登录按钮,使用了CSS的过渡效果和伪类来实现输入框的动态效果。…