微信小程序-自定义tabBar
通过官网给出的示例自己实现了自定义的tabBar,但结果发现
无法监听页面生命周期函数
结语:原想的是实现不一样的效果(如下)

故尝试了自定义tabBar,虽然做出来了,但也发现这个做法存在不足:
在页面js文件中,需要给出以下代码:
Component({pageLifetimes: {show() {if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({selected: 0 // 对应tabBar的下标})}}},data: {navBarHeight: getApp().globalData.navBarHeight,},
})
相当于将原来的page页面更改为组件components
这样做的结果就是无法监听页面生命周期函数(至少在创建page时自带的生命周期函数均无法监听)
这是我遇到的,若有解决方案,欢迎留言告知
实现步骤
官方文档:基础能力 / 自定义 tabBar (qq.com)
1.app.json配置tabBar
"tabBar": {"custom": true,"color": "#a5abbd","selectedColor": "#1dba73","backgroundColor": "#ffffff","list": [{"pagePath": "pages/home/home","text": "首页"},{"pagePath": "pages/index/index","text": "测试"}]}
注意:此处path不写最前面的 /
2.在项目根目录下添加文件夹custom-tab-bar,并添加组件,命名为index(下面的代码均借鉴官方demo,可自行修改)
项目文件夹如下:

index.js:
Component({data: {selected: 0,color: "#a5abbd",selectedColor: "#1dba73",list: [{pagePath: "/pages/home/home",iconPath: "/images/icon/home.svg",selectedIconPath: "/images/icon/home-selected.svg",text: "首页"}, {// 此处path必须加前面的/,否则在切换tabbar时,会自动拼接地址,导致传入url有误,系统没有任何效果pagePath: "/pages/index/index",text: "测试"}]},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.path// wx.switchTab切换tabBar组件,可传入url,success,fail,此处简写wx.switchTab({url})// 完整写法// wx.switchTab({// url: url,// success(res){console.log(res)},// fail(error){console.log(error)}// })this.setData({selected: data.index})}}
})
注意:此处path必须加前面的/,否则在切换tabbar时,会自动拼接地址,导致传入url有误,系统没有任何效果
index.json:
{"component": true
}
index.wxml:
<view class="tab-bar"><view class="tab-bar-border"></view><view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image><view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view></view>
</view>
index.wxss:
.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);
}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5);
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;
}.tab-bar-item image {width: 27px;height: 27px;
}.tab-bar-item view {font-size: 10px;
}
到此处应该就会出现tabBar且可点击,点击时也能切换页面
但可能出现问题:一个tabBar要点击两次才能更改样式(即tabBar与页面未连接)
解决:
在页面的js文件中:
Component({pageLifetimes: {show() {if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({selected: 0 // 对应tabBar的下标})}}},data: {navBarHeight: getApp().globalData.navBarHeight,},
})
至此,自定义tabBar便完成了,但就像我前面说的,如此修改之后,无法监听页面的生命周期函数,大家自行判断是否需要自定义tabBar,或者有更好解决方案的,欢迎评论区交流
相关文章:
微信小程序-自定义tabBar
通过官网给出的示例自己实现了自定义的tabBar,但结果发现 无法监听页面生命周期函数 结语:原想的是实现不一样的效果(如下) 故尝试了自定义tabBar,虽然做出来了,但也发现这个做法存在不足: 在…...
vue3+element-plus 实现动态菜单和动态路由的渲染
在 Vue.js 中,使用 Vue Router 管理路由数据,并将其用于渲染 el-menu(Element UI 的菜单组件)通常涉及以下几个步骤: 定义路由元数据: 在你的路由配置中,为每个路由项添加 meta 字段,…...
GO-学习-03-基本数据类型
数据类型:基本数据类型和复合数据类型 基本数据类型:整型、浮点型、布尔型、字符串 复合数据类型:数组、切片、结构体、函数、map、通道(channel)、接口 整型: package main import "fmt" im…...
高并发场景下,系统的保护机制
伴随着分布式,微服务项目的快速发展。各个微服务的调用和通讯难免会出现依赖关系,如果上游服务在依赖下游服务的时候下游服务出现了故障从而导致下游服务的不可用,进一步导致了上游的服务被拖垮,就会发生服务雪崩,故障…...
服务器构建私有npm库(Docker + Verdaccio)
npm官网有时候因为网络原因包推不上去,那就简单构建个私有库 私有库不会被共享,且配置不需要太高1h2G就行 1.需要安装Docker,这个跳过了 2.生成配置文件 mkdir /home/verdaccio cd /home/verdaccio mkdir conf && mkdir storage &am…...
LabVIEW做二次开发时应该注意哪些方面?
在使用LabVIEW进行二次开发时,以下几个方面需要特别注意: 需求明确化: 确认并详细记录客户的需求,明确系统的功能、性能、可靠性等要求。制定详细的需求文档,并与客户反复确认,避免后期的需求变更和误解。 …...
docker配置上网代理获取镜像
一、添docker子配置档设置 1、创建目录 mkdir /etc/systemd/system/docker.service.d 2、创建http-proxy.conf文件,增加以下内容 cat > /etc/systemd/system/docker.service.d/http-proxy.conf <<EOF [Service] Environment“HTTP_PROXYhttp://192.168.0.2:8118…...
SqlSugar删除没有定义主键的实体类对应的数据库表数据
一般而言,使用SqlSugar的DbFirst功能创建数据库表实体类时,如果数据库表有主键,生成的实体类对应属性也会标识为主键,如下图所示。 但有时候生成的实体类没有自动配置主键,这时可以通过以下方式进行删除操作&…...
虚拟机复制后网络不可用,报错“network.service - LSB: Bring up/down networking”
查询IP地址,eth33 没有显示IP地址 尝试重启,有报错,并且有提示,按照提示执行下看看 解决办法 chkconfig NetworkManager offsystemctl disable NetworkManager.serviceservice NetworkManager stopservice network restart 之后检…...
Redis 7.x 系列【30】集群管理命令
有道无术,术尚可求,有术无道,止于术。 本系列Redis 版本 7.2.5 源码地址:https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 集群信息2.1 CLUSTER INFO 3. 节点管理3.1 CLUSTER MYID3.2 CLUSTER NODES3…...
将YOLOv8模型从PyTorch的.pt格式转换为TensorRT的.engine格式
TensorRT是由NVIDIA开发的一款高级软件开发套件(SDK),专为高速深度学习推理而设计。它非常适合目标检测等实时应用。该工具包可针对NVIDIA GPU优化深度学习模型,从而实现更快、更高效的运行。TensorRT模型经过TensorRT优化,包括层融合(layer …...
Hello SLAM(在Linux中实现第一个C++程序)
首先需要安装vim编辑器,输入命令 sudo apt install vim 在Ubuntu上安装好vim编辑器后,创建路径(/home/slambook/ch2),在该路径下创建一个cpp文档(touch hello.c),通过vim编辑器进行…...
IPD推行成功的核心要素(十五)项目管理提升IPD相关项目交付效率和用户体验
研发项目往往包含很多复杂的流程和具体的细节。因此,一套完整且标准的研发项目管理制度和流程对项目的推进至关重要。研发项目管理是成功推动创新和技术发展的关键因素。然而在实际管理中,研发项目管理常常面临着需求不确定、技术风险、人员素质、成本和…...
C++ 鼠标轨迹API【神诺科技SDK】
一.鼠标轨迹模拟简介 传统的鼠标轨迹模拟依赖于简单的数学模型,如直线或曲线路径。然而,这种方法难以捕捉到人类操作的复杂性和多样性。AI大模型的出现,使得神诺科技 能够通过深度学习技术,学习并模拟更自然的鼠标移动行为。 二.…...
设计模式|观察者模式
观察者模式是一种行为设计模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。当主题对象发生变化时,它的所有观察者都会收到通知并更新。观察者模式常用于实现事件处理系统、发布-订阅模式等。在项目中,…...
python自动化运维 通过paramiko库和time库实现服务器自动化管理
目录 一.前言 二. 代码实现以及解析 2.1导入必要的库 2.2定义服务器信息 2.3创建 SSH 客户端连接函数 2.4执行远程命令函数 2.5获取系统信息函数 2.6重启服务函数 2.7 主函数 三.致谢 一.前言 在数字化时代,IT 基础设施的规模和复杂性不断增长&am…...
HTML常用的转义字符——怎么在网页中写“<div></div>”?
一、问题描述 如果需要在网页中写“<div></div>”怎么办呢? 使用转义字符 如果直接写“<div></div>”,编译器会把它翻译为块,类似的,其他的标签也是如此,所以如果要在网页中写类似于“<div…...
shell-awk文本处理工具
1、awk概述 AWK 是一种处理文本文件的语言,是一个强大的文本分析工具。 它是专门为文本处理设计的编程语言,也是行处理软件,通常用于扫描、过滤、统计汇总工作 数据可以来自标准输入也可以是管道或文件 在 linux 上常用的是 gawk,awk …...
如何在测试中保护用户隐私!
在当今数据驱动的时代,用户隐私保护成为了企业和开发团队关注的焦点。在软件测试过程中,处理真实用户数据时保护隐私尤为重要。本文将介绍如何在测试中保护用户隐私,并提供具体的方案和实战演练。 用户隐私保护的重要性 用户隐私保护不仅是法…...
ARCGIS PRO DSK GraphicsLayer创建文本要素
一、判断GraphicsLayer层【地块注记】是否存在,如果不存在则新建、如果存在则删除所有要素 Dim GraphicsLayer pmap.GetLayersAsFlattenedList().OfType(Of ArcGIS.Desktop.Mapping.GraphicsLayer).FirstOrDefault() 获取当前map对象中的GetLayer图层 Await Queue…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素,返回一个新的数组。 特点: 不修改原数组:slice 不会改变原数组,而是返回一个新的数组。提取数组的部分:slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...
VisualXML全新升级 | 新增数据库编辑功能
VisualXML是一个功能强大的网络总线设计工具,专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑(如DBC、LDF、ARXML、HEX等),并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...
怎么开发一个网络协议模块(C语言框架)之(六) ——通用对象池总结(核心)
+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...
深入解析 ReentrantLock:原理、公平锁与非公平锁的较量
ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类,用于实现线程同步,支持可重入性,并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理 基本架构 ReentrantLo…...
中科院1区顶刊|IF14+:多组学MR联合单细胞时空分析,锁定心血管代谢疾病的免疫治疗新靶点
中科院1区顶刊|IF14:多组学MR联合单细胞时空分析,锁定心血管代谢疾病的免疫治疗新靶点 当下,免疫与代谢性疾病的关联研究已成为生命科学领域的前沿热点。随着研究的深入,我们愈发清晰地认识到免疫系统与代谢系统之间存在着极为复…...
LINUX编译vlc
下载 VideoLAN / VLC GitLab 选择最新的发布版本 准备 sudo apt install -y xcb bison sudo apt install -y autopoint sudo apt install -y autoconf automake libtool编译ffmpeg LINUX FFMPEG编译汇总(最简化)_底部的附件列表中】: ffmpeg - lzip…...
篇章一 论坛系统——前置知识
目录 1.软件开发 1.1 软件的生命周期 1.2 面向对象 1.3 CS、BS架构 1.CS架构编辑 2.BS架构 1.4 软件需求 1.需求分类 2.需求获取 1.5 需求分析 1. 工作内容 1.6 面向对象分析 1.OOA的任务 2.统一建模语言UML 3. 用例模型 3.1 用例图的元素 3.2 建立用例模型 …...
