lirenGO_uniapp/components/tabbar/tabbar.vue

<template>
	<view class="all">
		<view class="" style="height: 250rpx;"></view>
		<view class="tabbar">
			<view class="tabItem" @click.stop="changeTab(0)">
				<image class="icon" :src="tabIndex === 0?'/static/tabbar/indexActive.svg':'/static/tabbar/index.svg'" mode="aspectFill"></image>
				<text :class="tabIndex === 0?'active':''">首页</text>
			</view>
			<view class="tabItem" @click.stop="changeTab(1)">
				<image class="icon" :src="tabIndex === 1?'/static/tabbar/shopActive.svg':'/static/tabbar/shop.svg'" mode="aspectFill"></image>
				<text :class="tabIndex === 1?'active':''">商城</text>
			</view>
			<view class="tabItem">
				<image class="carmera" src="/static/tabbar/carmera.svg" mode="aspectFill"></image>
			</view>
			<view class="tabItem" @click.stop="changeTab(2)">
				<image class="icon" :src="tabIndex === 2?'/static/tabbar/brandActive.svg':'/static/tabbar/brand.svg'" mode="aspectFill"></image>
				<text :class="tabIndex === 2?'active':''">品牌</text>
			</view>
			<view class="tabItem" @click.stop="changeTab(3)">
				<image class="icon" :src="tabIndex === 3?'/static/tabbar/myActive.svg':'/static/tabbar/my.svg'" mode="aspectFill"></image>
				<text :class="tabIndex === 3?'active':''">我的</text>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref,watch,onMounted,nextTick } from 'vue'
import util from '../../common/js/util'
	defineOptions({
		name: "tabbar"
	})
	const props = defineProps({
		tabIndex: {
			type: Number,
			default: 0
		}
	})
	
	const changeTab = (index)=>{
		switch(index){
			case 0: util.redirectTo('/pages/index/index',{},'reLaunch'); break;
			case 1: util.redirectTo('/pages/shop/index',{},'reLaunch'); break;
			case 2: util.redirectTo('/pages/brand/index',{},'reLaunch'); break;
			case 3: util.redirectTo('/pages/my/index',{},'reLaunch'); break;
		}
	}

</script>

<style lang="scss" scoped>
	.all{
		width: 100%;
	}
	.tabbar{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 500;
		width: 100%;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0,0,0,0.1);
		@include flexBox(start,center);
		.tabItem{
			width: 20%;
			height: 100%;
			@include flexBox(start,center,column);
			@include fontStyle(24rpx,#666666,center,400,50rpx);
		}
		.active{
			color: #3A71FF !important;
		}
	}
	.icon {
		width: 46rpx;
		height: 46rpx;
		margin-top: 26rpx;
	}
	.carmera{
		width: 180rpx;
		height: 150rpx;
		transform: translate(0,-50%);
	}
</style>