<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> </view> </template> <script> export default { props: { indexs: [Number, String], //题目id }, data() { return { currentTabbarIndex: 0, // 自定义底栏对应页面的加载情况 tabberPageLoadFlag: [], ispop: false, // indexs:1 } }, mounted() { this.currentTabbarIndex = this.indexs // setTimeout(()=>{ // this.indexs=2 // },300) }, methods:{ changeTabbar(index) { // if (this.currentTabbarIndex === index) return if(index==0){ uni.switchTab({ url:'/page_adoptBee/index', routeType: 'wx://modal', success: () => { this.currentTabbarIndex = index } }) }else if(index==1){ uni.switchTab({ url:'/page_adoptBee/renyang', routeType: 'wx://modal', success: () => { this.currentTabbarIndex = index } }) }else if(index==2){ uni.switchTab({ url:'/pages/my', 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>