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

相关推荐
耶啵奶膘5 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o12 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index12 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情20 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字1 天前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔1 天前
uniapp rpx兼容平板
uni-app
荔枝吖1 天前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗1 天前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo14161 天前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app