uniapp对tabbar封装,简单好用

news2024/11/14 16:30:29

第一种,效果展示

上代码,新建一个公用组件,tabbar.vue

<template>
	<view class="tabbar">
		<view class="tabbar-item" @click="tabbarbtn(0)">
			<image class="item-image" v-if="value==0"  src="@/static/icon1.png" image>
			<image class="item-image" v-else src="@/static/icon5.png" ></image>
			<text :class="['item-text',value==0?'active':'']">微信</text>
		</view>
		<view class="tabbar-item" @click="tabbarbtn(1)">
			<image class="item-image" v-if="value==1" src="@/static/icon2.png" mode=""></image>
			<image class="item-image" v-else src="@/static/icon6.png" mode=""></image>
			<text :class="['item-text',value==1?'active':'']">通讯录</text>
		</view>
		<!-- 购物车没有数量情况 -->
		<!-- <view class="tabbar-item" @click="tabbarbtn(2)">
			<image class="item-image" v-if="value==2"  src="@/static/icon3.png" mode=""></image>
			<image class="item-image" v-else src="@/static/icon7.png" mode=""></image>
			<text :class="['item-text',value==2?'active':'']">发现</text>
		</view> -->
		<!-- 购物车有数量情况 -->
		<view class="tabbar-item" @click="tabbarbtn(2)">
			<view class="item-view">
				<image class="item-image" v-if="value==2"  src="@/static/icon3.png" mode=""></image>
				<image class="item-image" v-else src="@/static/icon7.png" mode=""></image>
				<view class="item-num">
					{{num}}
				</view>
			</view>
			<text :class="['item-text',value==2?'active':'']">发现</text>
		</view>
		<view class="tabbar-item" @click="tabbarbtn(3)">
			<image class="item-image" v-if="value==3"  src="@/static/icon4.png" mode=""></image>
			<image class="item-image" v-else   src="@/static/icon8.png" mode=""></image>
			<text :class="['item-text',value==3?'active':'']">我的</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		data() {
			return {
				num:2,
				value:this.vlue,
				 list: [{
				 		path: "pages/index/home"
				 	},
				 	{
				 		path: "pages/index/login"
				 	},
				 	{
				 		path: "pages/index/cartpage"
				 	},
				 	{
				 		path: "pages/index/personage"
				 	},
				 ],
			};
		},
		props:{
			vlue:{
				type: Number,
			}
		},
		methods:{
			tabbarbtn(index){
				uni.switchTab({
					url: '/' + this.list[index].path,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		// 苹果手机下边有小黑条的安全距离
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.1);
		display: flex;
		align-items: center;
		
		

		.tabbar-item {
			padding:35rpx 0 15rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.item-view{
				position: relative;
				.item-num{
					position: absolute;
					right:-85%;
					top:-40%;
					font-size:20rpx;
					color: #fff;
					border-radius: 20rpx;
					padding: 5rpx 15rpx;
					background-color: red;
				}
			}
			.item-image{
				display: block;
				width: 50rpx;
				height: 50rpx;
			}
			.item-text{
				margin-top: 4rpx;
				font-size: 24rpx;
				color: #666666;
			}
			.active{
				color: #d81e06;
			}
		}
	}
</style>

在pages.json中要tabbar里的页面路径

使用方式,在其他tabbar页面,引入此文件使用即可。

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

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

相关文章

什么是机器学习中的 Bagging?带有示例的指南

文章目录 一、说明二、理解集成学习2.1 什么是 Bagging&#xff1f;2.2 Bagging 与 Boosting2.3 套袋的优点 三、Python 中的 Bagging&#xff1a;简短教程3.1 数据集3.2 训练机器学习模型3.3 模型评估 四、装袋分类器4.1 评估集成模型4.2 最佳实践和技巧 五、结论 ​ 一、说明…

systrace/perfetto第三方app的Trace.beginSection方法无效问题和TAG开放剖析

背景 针对程序如何在自己的代码中加入相关的trace方法和TAG来方便在systrace/perfetto中进行查看&#xff0c;下面这篇文章已经进行了详细的讲解&#xff1a; systrace/perfetto中需要actrace打tag相关方法-车载车机framework系统开发实战 有针对native的c代码&#xff0c;也…

Java面试题总结-基础和框架-面试题一

1、TCP和UDP tcp 和 udp 是 OSI 模型中的运输层中的协议。tcp 提供可靠的通信传输&#xff0c;而 udp 则常被用于让广播和细节控制交给应用的通信传输。 两者的区别大致如下&#xff1a; tcp 面向连接&#xff0c;udp 面向非连接即发送数据前不需要建立链接&#xff1b;tcp …

MQ-135空气质量传感器(STM32)

目录 一、介绍 二、传感器原理 1.原理图 2.引脚描述 3.工作原理介绍 三、程序设计 main.c文件 mq135.h文件 mq135.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 MQ-135空气质量传感器属于MQ系列气体传感器&#xff0c;广泛用于检测有害气体、新鲜空气中的烟…

Vmware 傻瓜式安装( Linux 网络操作系统 01)

一、下载VMware虚拟机安装包 虚拟机下载链接&#xff1a;https://share.weiyun.com/4haPul0y ​ 二、安装 点击安装文件 ​ 点击下一步&#xff0c;勾选“我接受...条款"&#xff0c;继续点击下一步 修改更改安装位置&#xff0c;尽量不要安装到系统C盘&#xff1a; …

爆刷!LLM入门必备吴恩达新书-《面向开发者的LLM入门课程》

吴恩达联合OpenAI推出LLM现象级课程&#xff01;|||绝了||重磅首发&#x1f525; 1、LLM入门必看课程-吴恩达373 PDF||!适用于所有具备基础 Python 能力&#xff0c;想要入门 LLM 的学习者 2、由吴恩达老师与 OpenAI 联合推出的官方教程&#xff0c;面向入门 LLM 的开发者&…

[Linux入门]---进程替换

文章目录 1.进程替换原理2.进程替换函数2.1execl函数2.2execlp函数2.3execv函数2.4execvp函数2.5execle函数2.6execve函数2.7跨语言调用程序 3.总结 1.进程替换原理 一个程序替换的函数&#xff1a; #include <unistd.h> int execl(const char *path, const char *arg,…

Linux下的系统接口(实时更新)

文件操作 open pathname:路径 flags&#xff1a;文件的打开方式 mode&#xff1a;文件的权限 返回值 打开成功返回值该文件的文件描述符&#xff0c;打开失败返回-1。 write fd : 文件描述符 buf : 指向用于存储写入数据的缓冲区的指针 count : 写入字节的最大个数 返回…

7系列FPGA HR/HP I/O区别

HR High Range I/O with support for I/O voltage from 1.2V to 3.3V. HP High Performance I/O with support for I/O voltage from 1.2V to 1.8V. UG865&#xff1a;Zynq-7000 All Programmable SoC Packaging and Pinout

Jmeter之beanshell使用

beanshell&#xff1a;和setup类似&#xff0c;登录前需要做的工作&#xff0c;是一种java源代码解释器&#xff0c;具有脚本语言的特性 使用beanshell可以使jmeter实现更多的业务需求 beanshell常用语法 vars.get() 从jmeter中获得变量 vars.put() 把数据保存为jmeter的变量…

Access用了20年杀死VF,等来的却是:国产新型软件反杀

现如今&#xff0c;使用Access数据库的人可能不多了。 Access数据库 在早些年的时候&#xff0c;微软旗下有两个广为人知的桌面数据库开发工具。 一款是自家研发的Microsoft ACCESS&#xff0c;它依托Windows操作系统&#xff0c;并内嵌于Microsoft Office之中&#xff0c;深受…

2024下《系统规划与管理师》50个高频考点汇总!背就有效

今年高项仅考上半年一次&#xff0c;下半年考的高级科目只有系规难度相对较低&#xff0c;系规需要学习的内容比高项少很多&#xff0c;高项第四版教程731页&#xff0c;系规只有328页&#xff0c;少了一半多。并且系规IT内容会更少&#xff0c;考试内容大多在书上&#xff0c;…

接口幂等的方案

一、什么是幂等 幂等指多次操作产生的影响只会跟一次执行的结果相同&#xff0c;通俗的说&#xff1a;某个行为重复的执行&#xff0c;最终获取的结果是相同的。 二、什么是接口幂等 同一个接口&#xff0c;对于同一个请求&#xff0c;不管调用多少次&#xff0c;产生的最终…

除了C盘其它盘都不见了?专业数据恢复策略解析

在数字时代&#xff0c;数据几乎成为了我们生活与工作的核心。然而&#xff0c;当电脑突然遭遇“除了C盘其它盘都不见了”的困境时&#xff0c;无疑是对我们数据安全的一次重大挑战。面对这样的紧急情况&#xff0c;如何迅速、有效地恢复丢失的数据&#xff0c;成为了许多用户迫…

苹果被删视频怎么恢复?分享4个靠谱的方法

平时过年过节的时候&#xff0c;亲戚家的小孩总会拿你的手机乱点一通&#xff0c;有时可能会不小心点进手机相册里面&#xff0c;误删了相册里的视频。如果苹果用户遇到这种情况&#xff0c;那该如何恢复苹果被删视频呢&#xff1f;不要慌张&#xff0c;既然你点开了这篇文章&a…

cv::convexityDefects()详解

参考链接:详解OpenCV的函数convexHull()和函数convexityDefects(),并利用它们)做凸包(凸壳)检测及凸包(凸壳)的缺陷检测-CSDN博客 void convexityDefects( InputArray contour, InputArray convexhull, OutputArray convexityDefects ); 三个参数说明如下&#xff1a; contou…

Java ArrayList扩容机制 (源码解读)

结论&#xff1a;初始长度为10&#xff0c;若所需长度小于1.5倍原长度&#xff0c;则按照1.5倍扩容。若不够用则按照所需长度扩容。 一. 明确类内部重要变量含义 1&#xff1a;数组默认长度 2:这是一个共享的空数组实例&#xff0c;用于明确创建长度为0时的ArrayList &#xff…

钙粘蛋白CDH:肿瘤靶点研究新秀

前 言&#xff1a; 钙粘蛋白是钙依赖性细胞间粘附的重要介质&#xff0c;属于跨膜糖蛋白。钙粘蛋白在组织稳态中起重要作用&#xff0c;促进组织发育、突触粘附和上皮屏障功能。钙粘蛋白功能改变与癌症进展、血管疾病和其他病理学有关。目前多种钙粘蛋白有望成为治疗靶点&…

英伟达显卡A100定制版和原厂版什么区别为什么价格相差这么大?

环境&#xff1a; 英伟达A100显卡 问题描述&#xff1a; 英伟达显卡A100定制版和原厂版什么区别为什么价格相差这么大&#xff1f; 定制版 原本 解决方案&#xff1a; NVIDIA A100显卡的定制版和原版之间的主要区别通常在于它们的设计、用途、性能以及价格。以下是一些…

如何解决线上平台抽佣高 线下门店客流少的痛点!

目前&#xff0c;许多传统零售店铺正遭遇客源下降的难题。尽管广告推广能带来一定的客流&#xff0c;但其费用昂贵。鉴于此&#xff0c;众多零售商纷纷选择加入像美团、饿了么和抖音这样的大型在线平台&#xff0c;但这些平台的高佣金率导致了利润的大幅缩水。在这样的市场环境…