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页面,引入此文件使用即可。

相关推荐
2501_915918411 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
耶啵奶膘16 小时前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹16 小时前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
吴传逞17 小时前
记一次uniapp+nutui-uniapp搭建项目
uni-app
雪芽蓝域zzs20 小时前
uni-app倒计时公共组件 封装,倒计时组件
uni-app
2501_915918411 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
清风细雨_林木木1 天前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮1 天前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple