SmartBeehive/components/tab-bar/tab-bar.vue

<template>
	<view class="cont">
		<div class="tab"  @tap.stop="changeTabbar(0)" >
			<view class="type1"  v-if="indexs==0">
				<image src="@/static/tabbar/home-active.png" mode="" ></image>
			</view>
			<view class="type2"   v-if="indexs!=0">
				<image src="@/static/tabbar/home.png" mode=""></image>
			</view>
		</div>
		<div class="tab" @tap.stop="changeTabbar(1)" >
			<view class="type1"  v-if="indexs==1">
				<image src="@/static/tabbar/fc-active.png" mode=""></image>
			</view>
			<view class="type2"   v-if="indexs!=1">
				<image src="@/static/tabbar/fc.png" mode=""  ></image>
			</view>
		</div>
		<div class="tab" @tap.stop="changeTabbar(2)" >
			<view class="type1"  v-if="indexs==2">
				<image src="@/static/tabbar/fx-act.png" mode=""></image>
			</view>
			<view class="type2"  v-if="indexs!=2">
				<image src="@/static/tabbar/fx.png" mode=""  ></image>
			</view>
		</div>
		<div class="tab" @tap.stop="changeTabbar(3)" >
			<view class="type1" v-if="indexs==3">
				<image src="@/static/tabbar/map-act.png" mode=""></image>
			</view>
			<view class="type2"   v-if="indexs!=3">
				<image src="@/static/tabbar/map.png" mode=""  ></image>
			</view>
		</div>

		<!-- 认养 -->
<!-- 		<div class="tab" @tap.stop="changeTabbar(5)">
			<view class="type1"  v-if="indexs==5">
				<image src="@/static/tabbar/home-active.png" mode=""></image>
			</view>
			<view class="type2"   v-if="indexs!=5">
				<image src="@/static/tabbar/home.png" mode=""  ></image>
			</view>
		</div>
		<div class="tab" @tap.stop="changeTabbar(6)">
			<view class="type1"  v-if="indexs==6">
				<image src="@/static/tabbar/ry-act.png" mode=""></image>
			</view>
			<view class="type2"   v-if="indexs!=6">
				<image src="@/static/tabbar/ry.png " mode=""  ></image>
			</view>
		</div> -->

		<div class="tab" @tap.stop="changeTabbar(4)">
			<view class="type1"  v-if="indexs==4">
				<image src="@/static/tabbar/my-act.png" mode=""></image>
			</view>
			<view class="type2"   v-if="indexs!=4">
				<image src="@/static/tabbar/my.png" mode=""  ></image>
			</view>
		</div>
		
		
		
		
	</view>
</template>

<script>
export default {
	props: {
		indexs: [Number, String], //题目id
	},
	data() {
		return {
			currentTabbarIndex: 0,

			// 自定义底栏对应页面的加载情况
			tabberPageLoadFlag: [],
			ispop: false,
			// indexs:1
			type:'',
		}
	},
	onShow() {

	},
    onLoad() {
    	
    },
	mounted() {
		this.gettab()
		this.currentTabbarIndex = this.indexs
		// setTimeout(()=>{
		// 	this.indexs=2
		// },300)
	},
	methods:{
		gettab(){
			this.$u.get('/app/user/userInfo').then(res => {
				if(res.code == 200){
					// this.type = res.data.type
					this.type = 1
					// if(this.type == 1){
					// 	this.currentTabbarIndex = 0
					// }else{
					// 	this.currentTabbarIndex = 5
					// }
				}
			})
		},
		changeTabbar(index) {
			// if (this.currentTabbarIndex === index) return
			if(index==0){
				uni.switchTab({
					url:'/pages/index/index',
					routeType: 'wx://modal',
					success: () => {
						this.currentTabbarIndex = index
					}
				})
			}else if(index==1){
				uni.switchTab({
					url:'/pages/Apiary',
					routeType: 'wx://modal',
					success: () => {
						this.currentTabbarIndex = index
					}
				})
			}else if(index==2){
				uni.switchTab({
					url:'/pages/Beehive',
					routeType: 'wx://modal',
					success: () => {
						this.currentTabbarIndex = index
					}
				})
			}else if(index==3){
				uni.switchTab({
					url:'/pages/map',
					routeType: 'wx://modal',
					success: () => {
						this.currentTabbarIndex = index
					}
				})
			}else if(index==4){
				uni.switchTab({
					url:'/pages/my',
					routeType: 'wx://modal',
					success: () => {
						this.currentTabbarIndex = index
					}
				})
			}else if(index==5){
				uni.switchTab({
					url:'/pages/index',
					routeType: 'wx://modal',
					success: () => {
						this.currentTabbarIndex = index
					}
				})
			}else if(index==6){
				uni.switchTab({
					url:'/pages/renyang',
					routeType: 'wx://modal',
					success: () => {
						this.currentTabbarIndex = index
					}
				})
			}
		},
	}
}
</script>

<style lang="scss" scoped>
	.cont {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 78rpx;
		width: 664rpx;
		height: 122rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.tab{
			width: 96rpx;
			height: 82rpx;
			display: flex;
			// flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			position: relative;
			.type1{
				
				
				image{
					width: 96rpx;
					height: 82rpx;
				}
			}
			.type2{
				
			
				image{
					margin-top: 8rpx;
					width: 40rpx;
					height: 68rpx;
				}
			}
			
		}
	}
</style>