小程序配置自定义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.rhkb.cn/news/340540.html

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

相关文章

哥斯拉、冰蝎、中国蚁剑在护网中流量特征分析,收藏起来当资料吧,24年护网用得上

护网哥斯拉、冰蝎、中国蚁剑流量分析 【点击免费领取】CSDN大礼包:《黑客&网络安全入门&进阶学习资源包》🔗包含了应急响应工具、入侵排查、日志分析、权限维持、Windows应急实战、Linux应急实战、Web应急实战。 护网中最担心的是木马已经到了服…

6月软考新通知:24下集成大概率是中级蕞简单的一门

2024下半年软考6月新通知: 一、24下软考考试时间安排: 24下半年软考报名时间:8月19日-9月15日 24下半年软考考试时间:11月9-12日 24下半年软考成绩查询:12月中(预计) 二、考情分析 24上软考…

腾讯云SSL证书获取及Nginx配置教程

前言 很多人应该都有属于自己网站,刚开始基本是只能用http进行访问,无法使用https安全访问,但是随着网络安全意识的不断提高,越来越多的网站开始使用HTTPS协议来保护用户的数据安全,SSL证书是实现HTTPS协议的关键组件,本文将讲解如何在腾讯云上获取SSL证书,并配置到Ngi…

激光、超声波、霍尔、DS18B20 温度、模拟温度传感器 | 配合Arduino使用案例

激光传感器 用来发出红色激光。 /****** Arduino 接线 注意哈,这里直接两根***** Arduino 传感器* VCC 5v* GND A0 ***********************/ int pin A0; void setup() { Serial.begin(9600); // 串口通信用于输出 log pinMode(pin, OUTPUT)…

Laya设置Text组件scroll滑动文本

1设置 首先设置Text组件的overflow为scroll,如下图所示 2挂载脚本 将TextScroll脚本挂载到Text上,该脚本主要实现了手指或鼠标滑动文本的功能。 import Script Laya.Script; import Text Laya.Text; import Event Laya.Event;export default class…

Vue3整合Tailwindcss之padding样式类

04 常用基础样式 padding 样式类 什么是内边距 基础样式 ClassPropertiesp-0padding: 0px;px-0padding-left: 0px; padding-right: 0px;py-0padding-top: 0px; padding-bottom: 0px;ps-0padding-inline-start: 0px;pe-0padding-inline-end: 0px;pt-0padding-top: 0px;pr-0pa…

DeepDriving | 基于YOLOv8分割模型实现垃圾识别

本文来源公众号“DeepDriving”,仅用于学术分享,侵权删,干货满满。 原文链接:基于YOLOv8分割模型实现垃圾识别 0. 引言 YOLOv8是Ultralytics开源的一个非常火的AI算法,目前支持目标检测、实例分割、姿态估计等任务。…

卡塔尔央行启动CBDC项目 5月Solana区块链上创建近五十万种代币

近期加密货币和区块链领域的动态令人振奋,展现了这个领域的快速发展和潜力。首先,卡塔尔央行启动CBDC项目表明中央银行数字货币已经成为全球金融系统中的一部分,并且对于大额支付结算有着广泛的应用前景。Solana区块链上创建近五十万种代币的…

鸿蒙Ability Kit(程序框架服务)【ServiceExtensionAbility】

ServiceExtensionAbility 概述 [ServiceExtensionAbility]是SERVICE类型的ExtensionAbility组件,提供后台服务能力,其内部持有了一个[ServiceExtensionContext],通过[ServiceExtensionContext]提供了丰富的接口供外部使用。 本文描述中称被…

【UE5 刺客信条动态地面复刻】实现无界地面01:动态生成

2024.6.4更新 昨天半夜意识到生成Cube的方案不合适,又开始到处找动态地面的方法,发现了我想要的效果直接可以用nigara实现!!!! 于是这个部分就暂时告一段落,今季开始新的方向的学习。 为了快速…

动态规划——打家劫舍问题

198. 打家劫舍 问题描述 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一…

中国青年网投稿三下乡社会实践稿件方法

文稿要求 实践纪实类文稿 (1)标题:10-30个汉字为宜,要用一句话标题,清楚叙述开展社会实践的学校、内容等基本信息。 (2)正文:表述要流畅,不可写宣传稿,要注…

文件中找TOPK问题

一.TOP—K问题简介: TOP-K 问题:即求数据结合中前 K 个最大的元素或者最小的元素,一般情况下数据量都比较大 。 比如:专业前 10 名、世界 500 强、富豪榜、游戏中前 100 的活跃玩家等。 对于 Top-K 问题,能想到的最简…

c# - 运算符 << 不能应用于 long 和 long 类型的操作数

Compiler Error CS0019 c# - 运算符 << 不能应用于 long 和 long 类型的操作数 处理方法 特此记录 anlog 2024年5月30日

个人笔记-随意记录

常见问题&#xff1f; 1.linux重启服务 端口被占用如何解决&#xff1f; 查看某个端口被占用的进程 netstat -tulnp | grep :23454 强制杀死进程 kill -9 1776 重启服务即可

无人机、机器人10公里WiFi远距离图传模块,实时高清视频传输,飞睿CV5200模组方案,支持mesh自组网模块

在快速发展的物联网时代&#xff0c;远距离无线通信技术已成为连接各种智能设备的关键。无人机、安防监控、机器人等领域对数据传输的距离和速度要求越来越高。 公里级远距离WiFi模组方案可以通过多种技术和策略的结合来实现无人机和机器人之间的高效通信传输。 飞睿智能CV52…

Java排序算法汇总篇,八种排序算法

排序算法汇总: Java排序算法(一)&#xff1a;冒泡排序 Java排序算法(二)&#xff1a;选择排序 Java排序算法(三)&#xff1a;插入排序 Java排序算法(四)&#xff1a;快速排序 Java排序算法(五)&#xff1a;归并排序 Java排序算法(六)&#xff1a;希尔排序 Java排序算法(…

PPT 隐藏开启对象图层

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

代码随想录第24天|回溯part4 寻找切割点

93.复原ip地址 寻找切割点&#xff0c;但是需要注意的是&#xff0c;切割点&#xff08;即.号&#xff09;只有三个 将需要拼凑的值先放进一个数组里&#xff0c;等满足条件后再将其拼成字符串 class Solution { public:vector<string> res;vector<int> path;int …

opencv-python(五)

opencv的颜色通道中顺序是B&#xff0c;G&#xff0c;R。 图像属性 import cv2img cv2.imread(jk.jpg) print(fshape{img.shape}) print(fsize{img.size}) print(fdtype{img.dtype}) shape&#xff1a;图像像素的行&#xff0c;列&#xff0c;通道 size&#xff1a;行数 X …