uniapp小程序自定义中间凸起样式底部tabbar

我自己写的自定义的tabbar效果图自定义tabbar效果图
废话少说咱们直接上代码，一步一步来

第一步：

找到根目录下的 pages.json 文件，在 tabBar 中把 custom 设置为 true，默认值是 false。list 中设置自定义的相关信息，

pagePath： 页面路径；
iconPath： 点击前显示的图片；
selectedIconPath： 点击后显示的图片；
text： 底部导航的名称。
在这里插入图片描述

第二步

在根目录下创建 components 文件夹用来存放自定义tabBar组件，小伙伴们可以自定义文件夹和文件的名称。记得命名要规范哦！！！
在这里插入图片描述

第三步

咱也不截图了，看了那么多的文章全他妈截图，咱直接上代码方便有需要的小伙伴使用！！！！

<template>
	<view class="tabbar-container flex items-center">
		<!-- isRound是中间凸出样式的标志，用来判断当前子级是否是凸出样式的 -->
		<view :class="!item.isRound ? 'square' : 'is-square'" v-for="(item, index) in tabbarList" :key="index" @click="tabbarChange(index, item)">
			<!-- 不是凸出的子级 -->
			<template v-if="!item.isRound">
				<view class="item-top flex justify-center flex-col">
					<u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
						:height="item.height"></u-image>
				</view>
				<view class="item-bottom" :class="{'active': active === index}">
					<text>{{ item.text }}</text>
				</view>
			</template>
			<!-- 凸出的子级 -->
			<template v-else>
				<view class="flex flex-col justify-center items-center center-round">
					<view class="flex flex-col justify-center items-center">
						<u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
							:height="item.height"></u-image>
						<text :class="{'round-active': active === index}">{{ item.text }}</text>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'Tabbar',
		props: {
			tabbarIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// tabbar列表，配置自定义用到的属性字段
				tabbarList: [{
						pagePath: "/pages/homePage/index",
						iconPath: "/static/images/tabbar/index.png",
						selectedIconPath: "/static/images/tabbar/index-selected.png",
						text: "首页",
						width: '45rpx',
						height: '41rpx',
						isRound: false
					},
					{
						pagePath: "/pages/information/index",
						iconPath: "/static/images/tabbar/data.png",
						selectedIconPath: "/static/images/tabbar/data-selected.png",
						text: "数据",
						width: '44rpx',
						height: '43rpx',
						isRound: false
					},
					{
						pagePath: "/pages/aiRecommend/index",
						iconPath: "/static/images/tabbar/ai-recommend.png",
						selectedIconPath: "/static/images/tabbar/ai-recommend.png",
						text: "智能推荐",
						width: '120rpx',
						height: '120rpx',
						isRound: true
					},
					{
						pagePath: "/pages/vip/index",
						iconPath: "/static/images/tabbar/vip.png",
						selectedIconPath: "/static/images/tabbar/vip-selected.png",
						text: "会员",
						width: '39rpx',
						height: '37rpx',
						isRound: false
					},
					{
						pagePath: "/pages/center/index",
						iconPath: "/static/images/tabbar/center.png",
						selectedIconPath: "/static/images/tabbar/center-selected.png",
						text: "我的",
						width: '40rpx',
						height: '41rpx',
						isRound: false
					},
				],
				active: 0,
				isRound: false,
			}
		},
		mounted() {
			this.active = this.tabbarIndex
		},
		methods: {
			tabbarChange(index, item) {
				this.$emit('updateTabbar', index)
				uni.switchTab({
					url: item.pagePath
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar-container {
		width: 100%;
		height: 132rpx;
		position: fixed;
		bottom: 0;
		.square {
			width: 100%;
			height: 130rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.round-active {
				color: #207BDB;
			}
		}
		.square .item-top {
			width: 45rpx;
			height: 45rpx;
		}
		.is-square {
			width: 100%;
			height: 130rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.round-active {
				color: #207BDB;
			}
		}
		.center-round {
			width: 203rpx;
			height: 130rpx;
			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMsAAAAlCAYAAADstR3BAAADx0lEQVR4nO3deajnUxjH8dc1Y2zDzFjGvkZkKcofpNGgTCl/oGRfyto0iJJQypa1KJT9H7KUJYSsDRFlGqQUyi4kDVe2y1wdnqmZ3HSv+1vOOd/zrl/3d3/3j/s8p+/n9zzPOc85Z2R8fFxjIGyHvbEXdsC28dkcrIeNMAM/4s8waDbWxk/4HSvwDT7HZ3gfb+O9+HujjzSx9IcR7IGDsRAHYpM+/r8xvIOleAmvhMAaPaSJpXekqHAAjsCRETWGxW94EY/hcXxXwfgOnSaW6bMbTsGJ2CpD+1LUeRr3xs+xDGwqkiaW/8eMiCDnYEFBdn+Le3ArvsjAnqJoYpkaqeA+M0QyzDRruoxFinYdlhXsx0BpYpkcacZqCc7rc6E+DFJqdgXeqMyvntPE8t/MDpFciLk5G9oDnsXFWF68J32iiWVi1oqi/UpsmaOBfWIlHsJFsY7TWI0mln+zfxTA++Rm2AD5BVfjxnjfeTSxrMH8eDiOj0XFBp/EZMaTbSz+STe6zkikXKl15IQmlDVIbTlP4OGOpaMT0vXIkh6Gu3BIBrbkTupLuyDWaTpJVyNLih5n4N0mlEmTZgPvxlNdjTJdjCzzo/XjsAxsKZXvcToe7ZLTXYssi6I7twllemyMR3A71i/ZkanQFbHMxDV4BltkYE8tpFT2LezZBWe7kIZtjQcKa3gsjZ9DOPfX7GTtkWVBtG80ofSXlIrdh9tiZ2eV1CyWVIC+gM0ysKUrnI3nKmw2/ZsaxZL2mtyEOzArA3u6RtpG/WZsq66K2mqWeXgQh2ZgS9cZxXGxLlMFNUWWnWJPRhNKHmwY+//Pr8WhWiJLmrp8vk0LZ8u10fZfNDWIZVe82gr57LkKl5bsQOlp2FF4rQmlCC6JdZg5pTpQamRJ+fDNODUDWxpT41OcFAcBFkWJkWVRdAs3oZTJ9ng5vuw2KMmDkiLLprgBJ2dgS6M3fIzF0bOXPSVEllmx6ejDJpTq2DGOYkpi2T1353KOLGmD1jG4HDtnYE+jv/wRXReX5Xo2c65iOShOF9kvA1sagyVduXF91DSjOY19TmJZB8fi3LjHpNFtVsSRVLfg6xxGIgexpP0mp+GstgLfmIBV5zLfGXfPrBzWIA1LLNvgcBwdF/20I5kak+GrOJYpief1qHMGxqDEkmY99o1NWAvjqrhGYzr8EOs1S0M4ae3t136OaBLLvNV+H52iWufGavqqVzrIYPO4LzEJZJdocqz9UO3G8EnP7Qfx+iju3fwyZtbSc51qoDR5kN6nm9EmS3quZ2LdvwC4r+EYTWev0AAAAABJRU5ErkJggg==');
			background-position: center top;
			background-size: 100% 37rpx;
			background-repeat: no-repeat;
			position: absolute;
			margin-top: -72rpx;

			text {
				font-weight: 500;
				font-size: 20rpx;
				color: #555B66;
				position: absolute;
				top: 117rpx;
			}
		}

		.item-bottom {
			font-weight: 500;
			font-size: 20rpx;
			color: #555B66;
			margin-top: 14rpx;
		}

		.active {
			color: #207BDB;
		}
	}
</style>

注意：小程序背景图无法使用本地图片，要么转成base64，要么把图片存到服务器上，然后调用接口把图片路径返回。推荐第二种方法。

我写的有点繁琐，中间凸起的样式应该为一整块，可是ui只给了顶部的白色图片导致写的代码有点多。不过大体的思路差不多都是这样，小伙伴们也可以参考其他博主写的文章的思路去编写自定义组件。
在这里插入图片描述
这是我用到的图片，小伙伴们可以下载下来配合代码进行使用。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第四步

在需要的页面中引用自定义组件

<template>
	<Tabbar :tabbar-index="tabbarIndex" @updateTabbar="updateTabbar"></Tabbar>
</template>
<script>
	import Tabbar from "@/components/tabbar/tabbar.vue"
	components: { Tabbar },
	data() {
		return {
			tabbarIndex: 4,
		}
	},
	methods: {
		updateTabbar(e) {
			this.tabbarIndex = e
		},
	}
</script>

有需求的小伙伴们可以试试，我写的并不是很完美但是大体的思路是这样的，小伙伴们可以根据自己项目的需求进行改动。此文章可作为参考使用，希望能帮到有需求的小伙伴！！！！

如果有用的话就点击收藏起来吧！！！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

app专项测试（网络测试流程）

app专项测试（网络测试流程）

一、网络测试的一般流程 step1&#xff1a;首先要考虑网络正常的情况 ①　各个模块的功能正常可用 ②　页面元素/数据显示正常 step2&#xff1a;其次要考虑无网络的情况 ①　APP各个功能在无网络情况下是否可用 ②　APP各个页面之间切换是否正常 ③　发送网络请求时是…
阅读更多...
【Kubernetes Pod间通信-第3篇】Kubernetes中Pod与ClusterIP服务之间的通信

【Kubernetes Pod间通信-第3篇】Kubernetes中Pod与ClusterIP服务之间的通信

引言 我们之前了解了在不同场景下，Kubernetes中Pod之间的通信是如何路由的。 【Kubernetes Pod间通信-第1篇】在单个子网中使用underlay网络实现Pod到Pod的通信【Kubernetes Pod间通信-第2篇】使用BGP实现Pod到Pod的通信现在，我们来看看在集群中，Pod与服务之间的通信是如何…
阅读更多...
【免费】2007-2019年各省科技支出占一般公共预算支出的比重数据

【免费】2007-2019年各省科技支出占一般公共预算支出的比重数据

2007-2019年各省科技支出占一般公共预算支出的比重数据 1、时间&#xff1a;2007-2019年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区名称、年份、科技支出占一般公共预算支出的比重 4、范围&#xff1a;31省 5、指标解释&#xff1a…
阅读更多...
【LeetCode】day15 142.环形链表II

【LeetCode】day15 142.环形链表II

142. 环形链表 II - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则…
阅读更多...
C基础(六)指针，指针的基础概念、变量定义、运算、大小等

C基础(六)指针，指针的基础概念、变量定义、运算、大小等

指针&#xff1a; 什么是指针&#xff1a;指针表示内存地址&#xff0c;平时所说的指针一般是保存地址的指针变量。定义指针变量 格式&#xff1a;数据类型 *指针变量名。初始化和赋值&#xff1a;指针指向变量的首地址。定义指针后若未赋值则为野指针&#xff1b;可将变量地址…
阅读更多...
【R语言】获取数据

【R语言】获取数据

R语言自带2种数据存储格式&#xff1a;*.RData和*.rds。 这两者的区别是&#xff1a;前者既可以存储数据&#xff0c;也可以存储当前工作空间中的所有变量&#xff0c;属于非标准化存储&#xff1b;后者仅用于存储单个R对象&#xff0c;且存储时可以创建标准化档案&#xff0c…
阅读更多...
央行发布《贸易金融分布式账本技术要求》，参考架构包括5部分

央行发布《贸易金融分布式账本技术要求》，参考架构包括5部分

《银行科技研究社》（作者 木子剑）：2024年12月11日，中国人民银行发布金融行业标准《贸易金融分布式账本技术要求》（JR/T 0308-2024）（以下简称“《要求》”），当日实施。据悉，该文件的起草单位包括6大行和多家股份制银行等。 《要求》规定了分布式账本技术在贸易金融领域…
阅读更多...
CSS盒模型详解：从零开始理解margin、border、padding

CSS盒模型详解：从零开始理解margin、border、padding

引言 在CSS中&#xff0c;盒模型(Box Model)是一个非常基础且重要的概念。它定义了网页中每个元素如何占据空间以及元素间的关系。今天&#xff0c;我们就通过简单的例子来理解盒模型的构成。 盒模型的组成部分 CSS盒模型主要由四个部分组成&#xff08;从外到内&#xff09…
阅读更多...
DS图(中)(19)

DS图(中)(19)

文章目录 前言一、图的遍历广度优先遍历深度优先遍历 二、最小生成树Kruskal算法Prim算法两种方法对比 总结 前言 承上启下&#xff0c;我们来学习下图的中篇&#xff01;&#xff01;&#xff01; 一、图的遍历 图的遍历指的是遍历图中的顶点&#xff0c;主要有 广度优先遍历 …
阅读更多...
112，【4】攻防世界 web weak_auth

112，【4】攻防世界 web weak_auth

之前做过&#xff0c;回顾 进入靶场 输入admin 123456 不是&#xff0c;这也行&#xff0c;什么闭合方式&#xff0c;注释符都没用上 反而不自然了 不过输入admin 123456 纯属个人习惯 假如我没那么输&#xff0c;或者用户名&#xff0c;密码不是这两个&#xff0c;我该怎…
阅读更多...
蓝桥杯更小的数（区间DP）

蓝桥杯更小的数（区间DP）

题目描述 小蓝有一个长度均为 n 且仅由数字字符 0 ∼ 9 组成的字符串&#xff0c;下标从 0 到 n − 1&#xff0c;你可以将其视作是一个具有 n 位的十进制数字 num&#xff0c;小蓝可以从 num 中选出一段连续的子串并将子串进行反转&#xff0c;最多反转一次。小蓝想要将选出的…
阅读更多...
109，【1】攻防世界 web 题目名称-文件包含

109，【1】攻防世界 web 题目名称-文件包含

进入靶场 直接显示源代码 提示我们通过get方式传递名为filename的参数&#xff0c;同时给出了文件名check.php filenamecheck.php 显示使用了正确的用法&#xff0c;错误的方法 filename./check.php 还是一样的回显 傻了&#xff0c;题目名称是文件包含&#xff0c;需要用到…
阅读更多...
71.StackPanel黑白棋盘 WPF例子 C#例子

71.StackPanel黑白棋盘 WPF例子 C#例子

就是生成黑白棋盘&#xff0c;利用该控件能自动排列的功能。用一个横向的StackPanel嵌套纵向的StackPanel&#xff0c;然后在里面添加设定好长和高的矩形。 因为StackPanel是按照控件的大小展示的。所以如果不设置长和宽。就会显示不出矩形。 <StackPanel Orientation"…
阅读更多...
DeepSeek之python实现API应用

DeepSeek之python实现API应用

先创建一个API KEY https://platform.deepseek.com/api_keys python脚本实现 # Please install OpenAI SDK first: `pip3 install openai`from openai import OpenAIclient = OpenAI(api_key="", base_url="https://api.deepseek.com")response = cli…
阅读更多...
MySQL中like模糊查询如何优化？

MySQL中like模糊查询如何优化？

大家好&#xff0c;我是锋哥。今天分享关于【MySQL中like模糊查询如何优化&#xff1f;】面试题。希望对大家有帮助&#xff1b; MySQL中like模糊查询如何优化&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在MySQL中&#xff0c;LIKE模糊查询通常会影…
阅读更多...
通过docker安装部署deepseek以及python实现

通过docker安装部署deepseek以及python实现

前提条件 Docker 安装：确保你的系统已经安装并正确配置了 Docker。可以通过运行 docker --version 来验证 Docker 是否安装成功。 网络环境：保证设备有稳定的网络连接，以便拉取 Docker 镜像和模型文件。 步骤一：拉取 Ollama Docker 镜像 Ollama 可以帮助我们更方便地管理…
阅读更多...
制作PE启动盘（内含Win11 iso镜像）

制作PE启动盘（内含Win11 iso镜像）

前言 本文用于记录制作PE启动盘过程&#xff0c;学习记录用&#xff0c;如有不对请指出&#xff0c;谢谢&#xff01; 参考视频&#xff1a; 1. 微PE下载&#xff1a;https://www.bilibili.com/video/BV1vT4y1n7JX/?spm_id_from333.788.top_right_bar_window_history.conte…
阅读更多...
128陷阱

128陷阱

首先我们了解一下关于包装器类型 java是面向对象的语言&#xff0c;但基本类型并不是面向对象的&#xff0c;从而出现了包装器类型&#xff0c;并且包装器添加了更多的属性和方法。如我们在使用集合类型Collection的时候就一定要使用包装类型而非基本类型&#xff0c;它相当于将…
阅读更多...
javaEE-9.HTML入门

javaEE-9.HTML入门

目录 一.什么是html 二.认识html标签 1.标签的特点: 2.html文件基本结构 3.标签的层次结构 三、html工具 四、创建第一个文件 五.html常见标签 1标题标签h1-h6 2.段落标签:p 3.换行标签:br 4.图片标签:img 图片路径有1三种表示形式: 5.超链接:a 链接的几种形式: …
阅读更多...
开源 GPU 集群管理器 GPUStack

开源 GPU 集群管理器 GPUStack

GPUStack 是一个用于运行 AI 模型的开源 GPU 集群管理器。 项目地址&#xff1a;gpustack/gpustack: Manage GPU clusters for running AI modelshttps://github.com/gpustack/gpustackhttps://github.com/gpustack/gpustackhttps://github.com/gpustack/gpustack 核心特性 广…
阅读更多...
最新文章

Copyright @ 2022~2023