程序员经验分享-hwhale

uni-app底部导航栏tabBar监听变化以及变换样式

2023-11-13

一、简介

tabBar有三项，点击后两项变换tabBar的样式

二、案例演示

在这里插入图片描述

三、代码

1.首先，监听tabBar 点击切换,放在这三个页面，和onLoad同级。页面生命周期onTabItemTap 

**
 * 监听 TabBar 切换点击
 */
onTabItemTap: function(item) {
	console.log(item)
}

2.更改图片路径和汉字

page.json:【默认】

"tabBar": {
	"color": "#E0E3ED",
	"selectedColor": "#ffffff",
	"borderStyle": "white",
	"backgroundColor": "#3A57A1",
	"iconWidth": "18px",
	"spacing": "5px",
	"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/tabBarBlue/index1.png",
			"selectedIconPath": "static/tabBarBlue/index2.png",
			"text": "首页"
		},
		{
			"pagePath": "pages/mall/mall",
			"iconPath": "static/tabBarBlue/mall1.png",
			"selectedIconPath": "static/tabBarBlue/mall2.png",
			"text": "商城"
		},
		{
			"pagePath": "pages/mine/mine",
			"iconPath": "static/tabBarBlue/mine1.png",
			"selectedIconPath": "static/tabBarBlue/mine2.png",
			"text": "我的"
		}
	]
},

index.vue

/**
* 监听 TabBar 切换点击
 */
onTabItemTap: function(item) {
	console.log(item)
	// 点击了首页
	if (item.index == 0) {
		console.log("首页");
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarBlue/index1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarBlue/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarBlue/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#E0E3ED', //tab 上的文字默认颜色
			selectedColor: '#ffffff', //tab 上的文字选中时的颜色
			backgroundColor: '#3A57A1', //tab 的背景色，HexColor
			borderStyle: 'white' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了商城
	if (item.index == 1) {
		console.log("商城");
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了我的
	if (item.index == 2) {
		console.log("我的");
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
},

mall.vue

/**
 * 监听 TabBar 切换点击
 */
onTabItemTap: function(item) {
	console.log(item)
	// 点击了首页
	if (item.index == 0) {
		console.log("首页");
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarBlue/index1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarBlue/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarBlue/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#E0E3ED', //tab 上的文字默认颜色
			selectedColor: '#ffffff', //tab 上的文字选中时的颜色
			backgroundColor: '#3A57A1', //tab 的背景色，HexColor
			borderStyle: 'white' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了商城
	if (item.index == 1) {
		console.log("商城");
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了我的
	if (item.index == 2) {
		console.log("我的");
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
},

mine.vue

/**
* 监听 TabBar 切换点击
 */
onTabItemTap: function(item) {
	console.log(item)
	// 点击了首页
	if (item.index == 0) {
		console.log("首页");
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarBlue/index1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarBlue/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarBlue/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#E0E3ED', //tab 上的文字默认颜色
			selectedColor: '#ffffff', //tab 上的文字选中时的颜色
			backgroundColor: '#3A57A1', //tab 的背景色，HexColor
			borderStyle: 'white' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了商城
	if (item.index == 1) {
		console.log("商城");
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了我的
	if (item.index == 2) {
		console.log("我的");
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
},

四、总结

网址：https://uniapp.dcloud.net.cn/api/ui/tabbar.html#settabbaritem
onTabItemTap页面生命周期，点击 tab 时触发

uni.setTabBarItem(OBJECT)
动态设置 tabBar 某一项的内容

uni.setTabBarStyle(OBJECT)
动态设置 tabBar 的整体样式

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

univue

Uniapp

javascript

前端

uni-app底部导航栏tabBar监听变化以及变换样式 的相关文章

  • AJAX 安全问题

    我希望能够解决一些关于 AJAX 安全性的问题 这是我试图理解的一个场景 假设我正在使用 AJAX 向页面请求一些半敏感材料 例如 我将把用户的 ID 传递给一个 php 文件 并返回一些关于他们自己的信息 现在 是什么阻止人们模拟此 Ja

  • 当内部元素滚动位置到达顶部/底部时防止父元素滚动？

    我有一个小 浮动工具箱 一个带有position fixed overflow auto 效果很好 但是 当在该框内滚动 使用鼠标滚轮 并到达底部或顶部时 父元素 接管 滚动请求 工具框后面的文档滚动 这很烦人 而不是用户 要求的 我正在使

  • 将 Regex 对象分配给 html 输入模式

    我需要以编程方式将正则表达式对象分配给输入元素模式属性 以下是我当前的实现 var regex d 5 element attr pattern regex toString slice 1 1 有没有更好的方法来做到这一点而不需要字符串操

  • 有没有办法动态更改 jqGrid 的单元格值？

    这个问题可能已经被问过很多次了 但我想知道是否可以动态更改 jqgrid 的单元格值 我基本上有一个网格 它通过 JSON 字符串加载数据 在特定列的某些行上 该值可能为 null 因此 预先知道哪个行 ID 是一个问题 然后能够将 nul

  • JAVASCRIPT - 为什么这个对象没有改变？

    function myFunc theObject theObject make Ford model Focus year 2006 var mycar make Honda model Accord year 1998 var x my

  • 获取被调用的 javascript 文件的查询字符串

    是否可以在调用的 javascript 文件上使用 javascript 获取查询参数 如下所示 in html in file js console log this location query 这是否可能以某种方式实现 或者我必须使用

  • Javascript 对象属性名称

    在 C 中 可以将对象属性的名称作为字符串值获取 名称 对象 Property gt myProperty 这可以在 Javascript Typescript 中完成吗 Object Keys 是我找到的唯一东西 但它给了我所有的键 示例

  • 判断字符串是否包含有效的javascript代码

    我正在寻找一个C 返回的函数true如果字符串包含有效的 JavaScript 语法 例如 IsValidJavascript alert hello 会回来true but IsValidJavascript alertXXhelloZ

  • 以下文档我无法创建 Vue.js 3 的实例

    The code https stackblitz com edit vue ttt file src main js https stackblitz com edit vue ttt file src main js 问题 我正在尝试在

  • 如何将 Ajax.BeginForm MVC 助手与 JSON 结果一起使用？

    我正在尝试使用 ASP NET MVC Ajax BeginForm 帮助程序 但不想在调用完成时使用现有的内容插入选项 相反 我想使用自定义 JavaScript 函数作为回调 这可行 但我想要的结果应该以 JSON 形式返回 不幸的是

  • 正则表达式中连字符的这种用法有效吗？

    NB I only想知道它是否是正则表达式定义中未转义连字符的有效应用 它是not关于匹配电子邮件 连字符或反斜杠的含义 量词或其他任何内容的问题 另外 请注意 链接的答案并没有真正讨论转义 未转义连字符之间的有效性问题 通常我会像这样声明

  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show

  • Angular 4 Http POST 不起作用

    我希望每个人都做得很好 我最近开始使用 Angular 4 4 我一直在尝试将数据发布到我的 api 服务器 但不幸的是它不起作用 我花了大约两天的时间 但仍然没有成功 甚至已经尝试过 6 7 篇文章角 io https angular i

  • Angular JS - 使服务可以从控制器和视图全局访问

    假设我们有以下服务 myApp factory FooService function 然后 从控制器中 我会说 myApp controller FooCtrl scope FooService function scope FooSer

  • 从网页运行 ClickOnce 应用程序，无需用户操作

    我们有一个基于 Java 的 Web 应用程序以及用 C 编写的相同应用程序 如果 java 检查器发现客户端计算机上没有安装 Java 则应该运行该应用程序 这个想法是运行 C 单击一次 http en wikipedia org wik

  • 了解 Document.createElement()

    我在用着GWT及其底层DOM能力 我基本上想要实现的是 Have a div包含一些文本的元素 其中一些文本将被包围span元素 span 元素可相互拖动并提供上下文菜单 New span元素可以由最终用户动态创建 它可能是这样的 在应用程

  • javascript - 如何获取对象名称或关联数组索引名称？

    我有一个像这样的 JSON 对象 var list name1 element1 value1 name2 element1 value2 如何提取所有 nameX 字符串值 例如 假设我想将它们连接在一个字符串中输出 例如 name1 n

  • Google 地图 API - 地图未显示 - 没有错误

    我正在尝试将地图从 Google API 加载到 div 中 但是 地图未加载 并且没有输出任何错误 这是代码 google maps var geocoder map function codeAddress address geocod

  • 当php脚本通过ajax运行时显示进度条

    我有一个通过 ajax 向服务器提交值的表单

  • Graphql 将多个查询合并（组合）为一个？

    我正在尝试使用 JavaScript 将多个 GraphQL 查询合并为一个查询 我正在寻找这样的东西 let query3 mergeQueries query1 query2 我们事先不知道哪些查询将被组合 假设我有这样的查询 输入查询

随机推荐

  • 最小二乘曲线拟合——C语言算法实现二

    最小二乘曲线拟合 在上一篇博客中我们介绍了最小二乘法的原理 以及代码实现的例子 http blog csdn net beijingmake209 article details 27565125 本次我们再给出一个程序实现的例子 编译环境

  • 解决atibtmon.exe错误

    笔记本装好win7之后 折腾了一番 用驱动精灵更新了所有驱动 又装了林林种种的软件 继而用QQ管家优化系统 后来 发现系统在启动时 经常报错 atibtmon exe 如下 在网上搜了一番 有的说重装显卡驱动 有的说要重装visual c

  • XPath crash course note

    XPath language What is XPath To be supplied What is XPath for To be supplied Why XPath To be supplied basic concepts exa

  • exception in thread main java.lang.NoClassDefFoundError wrong name解决方法

    初学java时 在执行java文件时 可能会遇到java代码能编译通过 但执行文件时出现 exception in thread main java lang NoClassDefFoundError wrong name的错误 当不含包层

  • linux 清空文件内容的方式

    目录 一 通过重定向来清空文件内容 gt 通过shell重定向null到指定文件即可 gt 重定向 或 true 到指定文件 二 使用cat cp dd使用工具和 dev null设备来清空文件内容 gt 可以使用cat命令查看 dev n

  • Excel实现数据的线性回归

    文章目录 一 下载安装Excel 二 使用Excel做线性回归 三 验证回归方程的精度 四 参考资料 一 下载安装Excel 一般购买的电脑都已经安装好了Microsoft Office 就不需要进行下载安装这一过程 百度网盘链接 http

  • 记录一下Object.entries()的用法

    Object entries 方法返回一个给定对象自身可枚举属性的键值对数组 其排列与使用 for in 循环遍历该对象时返回的顺序一致 区别在于 for in 循环还会枚举原型链中的属性 语法 Object entries obj 参数

  • 赛车游戏——【极品飞车】（内含源码inscode在线运行）

    前言 作者主页 雪碧有白泡泡 个人网站 雪碧的个人网站 推荐专栏 java一站式服务 前端炫酷代码分享 uniapp 从构建到提升 从0到英雄 vue成神之路 解决算法 一个专栏就够了 架构咱们从0说 数据流通的精妙之道 文章目录 前言 认

  • MFC ActiveX 接口数据类型，伤不起！

    要不是因为我一直在维护一个曲线绘制控件 www st curve cn 我真的很不想再碰MFC的ActiveX了 其中怎一个乱字了得 回想起来 似乎还是vc6最好 后来我相继升级到了vc2003 2008 2010 每次升级都让我很受伤 注

  • 【机器学习】多分类及多标签分类算法（含源代码）

    目录 多分类及多标签分类算法 一 单标签二分类问题 1 1 单标签二分类算法原理 二 单标签多分类问题 2 1 ovo 2 1 1 手写代码 2 1 2 调用API 2 2 ovr 2 2 1 手写代码 2 2 2 调用API 2 3 Ov

  • 2022年十月份电赛OpenMV巡线方案（2）---主控代码详细分析

    前言 1 继上一篇 2022年十月份电赛OpenMV巡线方案详细代码分析 1 2 这个代码适用于所有主控 只需要更改一下串口接收部分的API 别问我某某MCU能不能跑的这种废话 3 本文使用的协议与正点原子的串口通讯协议一致 看不懂的建议学

  • 当前系统环境打成tar包

    当前系统环境打成tar包 原文地址 https www cnblogs com alexkn p 3879540 html 命令 tar numeric owner exclude proc exclude sys zcvf centos7

  • 【PlayWright教程（一）】安装和使用（python）

    当今常用的三个自动化测试 或者爬虫 库 库 Selenium Puppeteer Playwright JavaScript 支持 官方支持 官方支持 官方支持 Python 异步支持 无 第三方 而且 bug 不少 官方支持 Python

  • 使用bibmap修改bib文件中参考文献的期刊或会议名的字母大小写格式为titlecase

    使用bibmap方便的修改bib文件中参考文献的期刊或会议名的字母大小写格式为titlecase 1 引言 英文语句的字母大小写形式有多种格式 常用的格式是 全大写 upper case 即句子的所有字母都大写 常见于学位论文 报告等的封面

  • system.data.sqlite的源代码下载

    帮助文档 http system data sqlite org index html doc trunk www index wiki 历史版本https system data sqlite org index html doc tru

  • Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click

    Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件 当点击目标DOM元素时触发ViewModel的对应方法 例如 使用Click绑定 1

  • Redis有序集合和定时任务解决订单15分钟关闭

    直接上代码 下单减去库存 public String updatePersonStock PageData pd throws Exception Map

  • IPSec协议

    内容提要 Motivation IP协议的安全缺陷 虚拟专用网 IPSec概述 协议流程 SPD SAD 数据封装 IPSec AH IPSec ESP 安全参数协商 ISAKMP IKE 一 Motivation 1 1IP协议的安全缺陷

  • Google Chrome 扩展程序

    Adblock Plus 扩展网址 https chrome google com webstore detail adblock plus free ad bloc cfhdojbkjhnklbpkdaibdccddilifddb 官网

  • uni-app底部导航栏tabBar监听变化以及变换样式

    一 简介 tabBar有三项 点击后两项变换tabBar的样式 二 案例演示 三 代码 1 首先 监听tabBar 点击切换 放在这三个页面 和onLoad同级 页面生命周期onTabItemTap 监听 TabBar 切换点击 onTab

热门标签