小程序官方tabbar和自定义tabbar

news2025/1/13 2:38:35

uniapp官方tabbar：

  1. 打开项目中的 pages.json 文件。

  2. 在 JSON 对象中添加一个名为 tabBar 的字段，并设置其值为一个对象。

  3. 在 tabBar 对象中，配置 color 和 selectedColor 字段来定义 TabBar 的默认颜色和选中项的颜色。示例：

     

    "tabBar": {
  "color": "#999999",  //默认颜色
  "selectedColor": "#FF0000" //选中项的颜色
}

  4. 添加一个名为 list 的数组字段，用于定义 TabBar 的每个选项。

  5. 在 list 数组中，每个对象表示一个选项，可以设置 pagePath、text、iconPath 和 selectedIconPath 字段来定义选项的路径、文本、默认图标和选中图标。示例：
     

    "tabBar": {
  "color": "#999999", //tab 上的文字默认颜色
  "selectedColor": "#FF0000", //tab 上的文字选中时的颜色
  "borderStyle": "black", //bat上边框颜色
  "backgroundColor": "#fff", //tab的背景色
  "list": [
    {
      "pagePath": "pages/index/index",  //页面路径，必须在 pages 中先定义
      "text": "首页",                    //tab 上按钮文字
      "iconPath": "static/tabbar/home.png", //默认图片路径
      "selectedIconPath": "static/tabbar/home-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/cart/cart",//页面路径，必须在 pages 中先定义
      "text": "购物车",             //tab 上按钮文字
      "iconPath": "static/tabbar/cart.png", //默认图片路径
      "selectedIconPath": "static/tabbar/cart-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/profile/profile", //页面路径，必须在 pages 中先定义
      "text": "个人中心", //tab 上按钮文字
      "iconPath": "static/tabbar/profile.png",//默认图片路径
      "selectedIconPath": "static/tabbar/profile-selected.png" //选中时的图片路径
    }
  ]
}

    配置完毕后，保存 pages.json 文件

uniapp自定义tabbar组件

在 pages.json 文件中配置自定义 TabBar。在tabbar中加上"custom": true，就变成了自定义tabbar。代码如下：

"tabBar": {
  "custom": true,     //改为自定义tabbar 
  "color": "#999999", //tab 上的文字默认颜色
  "selectedColor": "#FF0000", //tab 上的文字选中时的颜色
  "borderStyle": "black", //bat上边框颜色
  "backgroundColor": "#fff", //tab的背景色
  "list": [
    {
      "pagePath": "pages/index/index",  //页面路径，必须在 pages 中先定义
      "text": "首页",                    //tab 上按钮文字
      "iconPath": "static/tabbar/home.png", //默认图片路径
      "selectedIconPath": "static/tabbar/home-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/cart/cart",//页面路径，必须在 pages 中先定义
      "text": "购物车",             //tab 上按钮文字
      "iconPath": "static/tabbar/cart.png", //默认图片路径
      "selectedIconPath": "static/tabbar/cart-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/profile/profile", //页面路径，必须在 pages 中先定义
      "text": "个人中心", //tab 上按钮文字
      "iconPath": "static/tabbar/profile.png",//默认图片路径
      "selectedIconPath": "static/tabbar/profile-selected.png" //选中时的图片路径
    }
  ]
}

然后在下边加上usingComponents字段

"tabBar": {
  "custom": true,     //改为自定义tabbar 
  "color": "#999999", //tab 上的文字默认颜色
  "selectedColor": "#FF0000", //tab 上的文字选中时的颜色
  "borderStyle": "black", //bat上边框颜色
  "backgroundColor": "#fff", //tab的背景色
  "list": [
    {
      "pagePath": "pages/index/index",  //页面路径，必须在 pages 中先定义
      "text": "首页",                    //tab 上按钮文字
      "iconPath": "static/tabbar/home.png", //默认图片路径
      "selectedIconPath": "static/tabbar/home-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/cart/cart",//页面路径，必须在 pages 中先定义
      "text": "购物车",             //tab 上按钮文字
      "iconPath": "static/tabbar/cart.png", //默认图片路径
      "selectedIconPath": "static/tabbar/cart-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/profile/profile", //页面路径，必须在 pages 中先定义
      "text": "个人中心", //tab 上按钮文字
      "iconPath": "static/tabbar/profile.png",//默认图片路径
      "selectedIconPath": "static/tabbar/profile-selected.png" //选中时的图片路径
    }
  ]
}，
 //usingComponents字段是在页面的 JSON 配置文件（如 pages.json）中使用的，用于声明并引入自定义组件。

  "usingComponents": {
	    "customtabbar": "custom-tab-bar/index"。//引入自定义组件，键为组件名，值为组件路径
	  },

这样代码写完就是在pages.json里配置完成了，然后封装一个组件名字为custom-tab-bar的tabbar文件

文件里包含四个文件复制即可如下：

 

index.js：

Component({
	data: {
		selected: null,
		color: '#78747F',
		selectedColor: '#007AFF',
		list: [{
			pagePath: '/tabbar/home/index',
			iconPath: '/static/icons/img/home.png',
			selectedIconPath: '/static/icons/img/home2.png',
			text: '首页'
		}, {
			pagePath: '/tabbar/me/index',
			iconPath: '/static/icons/img/me.png',
			selectedIconPath: '/static/icons/img/me2.png',
			text: '我的'
		}]
	},
	attached() { },
	methods: {
		switchTab(e) {
			const data = e.currentTarget.dataset
			const url = data.path
			console.log(data);
			console.log(url);
				wx.switchTab({
					url  //就是要跳转的tabbar页面
				})
		},

	}
})

index.json:

{
  "component": true
}

index.wxml:这个是tabbar html页面 list是tabbar里定义的对象

<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <view class="tab-bar-border"></view>
  <view wx:for="{{list}}" wx:key="index" class="{{!item.text ? 'big' : ''}} tab-bar-item flex-1 item{{index}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
	<image wx-if="{{selected === index}}"  src="{{item.selectedIconPath}}" mode="aspectFit"></image>
	<image wx-if="{{selected !== index}}"  src="{{item.iconPath}}" mode="aspectFit"></image>
    <view class="btn-box" wx-if="{{item.text}}" style="color: {{selected === index ? selectedColor : color}}">
		{{item.text}}
	<!-- 	<button wx-if="{{index === 4}}" class="btn" type="default" open-type="getUserInfo" bindgetuserinfo="auth"></button> -->
	</view>
  </view>
</view>

index.wxss:

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height:55px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index:-1;
}

.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;
  font-size: 13px;
}
.tab-bar-item image {
  width:36.23rpx;
  height:48rpx;
}

/* .tab-bar-item-image-0 {
  width:36.23rpx;
  height:48rpx;
} */

/* .tab-bar-item-image-1 { 
  width:100rpx;
  height:48rpx !important;
} */

.tab-bar-item.big image{
	width: 61.59rpx;
	height: 61.59rpx;
}
.tab-bar-item cover-image {
  width: 48.91rpx;
  height: 48.91rpx;
}

.tab-bar-item cover-view {
  font-size: 10px;
}
.tab-bar-item  {
	position: relative;
}
.tab-bar-item .btn-box .btn {
	opacity: 0;
	padding: 0;
	height: 50px;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

 封装完以后在每个tabbar页面中加一下代码：

 

home页面
onShow() {
			const page = this.$mp.page
			console.log(page.getTabBar(),'page');
			if (typeof page.getTabBar === 'function' && page.getTabBar()) {
				page.getTabBar().setData({
					selected: 0 这个下标就是封装tabbar中list数组中的数据下标
				})
			}
		
		},


//page 是通过 this.$mp.page 获取的当前页面实例
//typeof page.getTabBar === 'function' 是用于检查 page.getTabBar 是否为一个函数，以确保可以调用 getTabBar 方法。
//page.getTabBar() 调用 getTabBar 方法，返回当前页面所属的 TabBar 实例。
//page.getTabBar().setData({ selected: 0 }) 调用 TabBar 实例的 setData 方法，将选中项的索引设置为 0。这样就会使 TabBar 中索引为 0 的项高亮显示，表示当前选中的项。
me页面
onShow() {
			const page = this.$mp.page
			console.log(page.getTabBar(),'page');
			if (typeof page.getTabBar === 'function' && page.getTabBar()) {
				page.getTabBar().setData({
					selected: 1 //这个下标就是封装tabbar中list数组中的数据下标
				})
			}
		
		},


//page 是通过 this.$mp.page 获取的当前页面实例
//typeof page.getTabBar === 'function' 是用于检查 page.getTabBar 是否为一个函数，以确保可以调用 getTabBar 方法。
//page.getTabBar() 调用 getTabBar 方法，返回当前页面所属的 TabBar 实例。
//page.getTabBar().setData({ selected: 1 }) 调用 TabBar 实例的 setData 方法，将选中项的索引设置为 1。这样就会使 TabBar 中索引为 1 的项高亮显示，表示当前选中的项。

 这样自定义tabbar就好了！！！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

功放IC 2018和功放IC HX8358A的区别

功放IC 2018和功放IC HX8358A的区别

概述&#xff1a; 2018功放IC&#xff0c;目前在市面的情况是品牌多、杂&#xff0c;芯片的工作电压和喇叭输出功率不统一。经常出现低电压芯片用在高电压的产品上面&#xff0c;导致芯片容易损坏&#xff0c;给用户带来一定的麻烦。但它的销售量可能已超过8002的功放芯片了&am…
阅读更多...
6.19、JAVA IO流 File 字节流 字符流

6.19、JAVA IO流 File 字节流 字符流

IO简介 1 流Stream 在学习IO流之前,我们首先需要学习的概念就是Stream流 为了方便理解,我们可以把数据的读写操作抽象成数据在"管道"中流动,但需注意: 1.流只能单方向流动 2.输入流用来读取 → in 3.输出流用来写出 → out 4.数据只能从头到尾顺序的读写一次 所以以…
阅读更多...
Python 基本数据类型（六）

Python 基本数据类型（六）

文章目录 每日一句正能量Tuple&#xff08;元组&#xff09;结语 每日一句正能量 一生要做的几件事情一管理好自己的身体。二管理好自己的情绪&#xff0c;正面思维。三服务好自己的家庭&#xff0c;让家人生活幸福。四做好本职工作&#xff0c;做一两件特别完美&#xff0c;石…
阅读更多...
剑指 Offer 51： 数组中的逆序对

剑指 Offer 51： 数组中的逆序对

这道题归根结底就是一个归并问题&#xff0c;逆序对本质上就是比较大小&#xff0c;如果两边作为一个整体比较过那么就可以排序合并&#xff08;因为这个过程每一步都计算了count的值&#xff0c;所以合并起来是可以的&#xff09;。 下面的k应该是mid1&#xff08;从中间的右…
阅读更多...
智“绘“城市：智慧环卫可视化运营管理系统

智“绘“城市：智慧环卫可视化运营管理系统

前言 随着我国城镇化的不断推进&#xff0c;城市的规模、数量不断增加&#xff0c;城市的人口数量也快速增长&#xff0c;造成的城镇生活垃圾、建筑垃圾也随之增长&#xff0c;这造成人们对环卫服务的需求增加。而与此同时&#xff0c;随着经济社会的快速发展&#xff0c;人们…
阅读更多...
ChatGLM-6B微调p tuning v2和lora对比

ChatGLM-6B微调p tuning v2和lora对比

官方项目地址&#xff1a;https://github.com/THUDM/ChatGLM-6B 参考本人之前的博客下载ChatGLM-6B模型&#xff1a; https://blog.csdn.net/Acecai01/article/details/131221676 设备 一张3090Ti&#xff0c; 24G显卡 实验目的 通过微调的方法&#xff0c;训练ChatGLM-6B模…
阅读更多...
【AUTOSAR】BMS开发实际项目讲解（二十七）----电池管理系统高压上下电管理

【AUTOSAR】BMS开发实际项目讲解（二十七）----电池管理系统高压上下电管理

高压上下电管理 关联的系统需求 Sys_Req_3201、Sys_Req_3202、Sys_Req_3203、Sys_Req_3204、Sys_Req_3205、Sys_Req_3206、Sys_Req_3207、Sys_Req_3208、Sys_Req_3209; 功能实现描述 高压上下电管理基于下图所示高压拓扑开发 图继电器高压拓扑图 高压上电管理 高压上电管理需…
阅读更多...
华为bgp跨跳建立邻居后产生黑洞路由用mpls ldp解决方法

华为bgp跨跳建立邻居后产生黑洞路由用mpls ldp解决方法

捉包发现R2在处理1.1.1.1到5.5.5.5走的是标签转发 R1: dis current-configuration [V200R003C00] snmp-agent local-engineid 800007DB03000000000000 snmp-agent clock timezone China-Standard-Time minus 08:00:00 portal local-server load flash:/portalpage.zip drop i…
阅读更多...
Jenkins2.3.46安装

Jenkins2.3.46安装

一、安装和安装Jenkins 0.前提 因jenkins从2.357版本开始不再支持java8 2、jenkins与java版本对应查看&#xff0c;与jenkins下载&#xff1a;Redhat Jenkins Packages 3、打算使用java8&#xff0c;所以选择安装2.346.3-1.1 4、安装jenkins之前&#xff0c;安装好java8并…
阅读更多...
Day_58-59 NB 算法

Day_58-59 NB 算法

目录 Day_58符号型数据的 NB 算法 一. 关于NB算法的介绍 1. 条件概率 2. 独立性假设 3. 以上式子的分析 4. Laplacian 平滑 5. 问题的回顾 二. 代码实现 1. 代码的符号说明 2. 构造函数和基础函数 3. 计算结果的分布情况 4. 核心代码 5. 分类 三. 符号型数据的运行结果 Da…
阅读更多...
使用vtk创建设置了面的颜色的立方体

使用vtk创建设置了面的颜色的立方体

引言 该示例为官网上的例子。创建了一个每个面被设置相同颜色的立方体。 示例 开发环境 使用QtCreator4.11.2,Qt5.14.2。使用的vtk9.2的库及其头文件。创建空项目。 示例代码 其pro文件中的内容&#xff1a; QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT w…
阅读更多...
利用jmeter测试java请求

利用jmeter测试java请求

jmeter和loadrunner一样包含了测试脚本开发、测试执行、以及测试结果统计三个部分。只是jmeter没有脚本开发工具&#xff0c;因此测试java请求的脚本选择在eclipse中进行。 首先介绍如何用eclipse编写接口性能测试脚本。 针对"Java请求"类型的测试&#xff0c;需要…
阅读更多...
折半查找包含程序

折半查找包含程序

折半查找又称二分查找&#xff0c;它仅适用于有序的顺序表 以下面的例子来讲解折半查找的过程 元素710131619293233374143数组位置012345678910 第一步&#xff1a;先确定查找元素&#xff0c;以14为例子&#xff1b;low和high分别是指向表的上界和下界&#xff1b;最开是low…
阅读更多...
【Cookie】Cookie简介以及跨域问题

【Cookie】Cookie简介以及跨域问题

Cookie 一、Cookie简介 1、Cookie是什么 cookie是由网络服务器存储在你电脑硬盘上的一个txt类型的小文件&#xff0c;它和你的网络浏览行为有关&#xff0c;所以存储在你电脑上的cookie就好像你的一张身份证&#xff0c;你电脑上的cookie和其他电脑上的cookie是不一样的。 …
阅读更多...
java 堆（优先级队列）详解

java 堆（优先级队列）详解

JAVA堆以及优先级队列详解 一、堆的模拟实现1.1堆的概念1.2 堆的性质1.3堆的存储结构1.4堆的创建1.4.1 只有根节点不满足堆的特性1.4.2 不只有根节点不满足堆的特性1.4.2.1 建堆代码1.4.2.2 建堆过程图示 1.4.3 建堆的时间复杂度 1.5堆的插入1.5.1堆的插入的基本思想1.5.2堆的插…
阅读更多...
非局部attention之Non-local

非局部attention之Non-local

论文&#xff1a;Non-local Neural Networks Github&#xff1a;GitHub - AlexHex7/Non-local_pytorch: Implementation of Non-local Block. GitHub - facebookresearch/video-nonlocal-net: Non-local Neural Networks for Video Classification cvpr2018 凯明作品 论文提出…
阅读更多...
Echarts自定义legend图例

Echarts自定义legend图例

legend: {icon: rect, // 形状itemHeight: 4, // 高度itemWidth: 18, // 宽度itemGap: 15, //设置图例的间距...... }, 效果&#xff1a;
阅读更多...
QT进度条代理的实现

QT进度条代理的实现

目的 进度条也是一个基本的功能&#xff0c;这里进度条想在Tableview里面实现&#xff0c;让Tableview其中一个单元格显示进度条&#xff0c;因为就用了代理。 什么是代理&#xff0c;官方说&#xff1a; 代理(Delegate)就是在视图组件上为编辑数据提供编辑器&#xff0c;如在…
阅读更多...
Kindle刷机安装微信读书。

Kindle刷机安装微信读书。

1、越狱 2、安装软件 3、刷机 4、安装微信读书 刷机参考链接&#xff1a; https://www.xiaohongshu.com/explore/63d3f730000000001f027d0e?sourcequestion Kindle 通用越狱教程&#xff1a;适用固件版本 5.12.2.2~5.14.2 – 书伴 正式开始了。 1、越狱&#xff0c;参考…
阅读更多...
[Flask] Flask会话

[Flask] Flask会话

由于HTTP的无状态性&#xff0c;为了使某个域名下的所有网页能够共享某些数据&#xff0c;Cookie和Session应运而生 1.Cookie对象 HTTP是无状态(stateless)协议&#xff0c;一次请求响应结束后&#xff0c;服务器不会留下任何关于对方状态的信息 也就是说&#xff0c;尽管在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023