uniapp对tabbar封装,简单好用

第一种,效果展示

上代码,新建一个公用组件,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页面,引入此文件使用即可。

相关推荐
xiaohe06015 小时前
🪀 Uni ECharts:也许是 uni-app 中使用 ECharts 最优雅的解决方案
uni-app
陈不知代码17 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw17 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者21 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮1 天前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
耶啵奶膘1 天前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
The_era_achievs_hero1 天前
UniappDay03
vue.js·微信小程序·uni-app
游戏开发爱好者82 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖2 天前
uniapp小程序上传图片并压缩
小程序·uni-app