176 lines
3.5 KiB
Vue
176 lines
3.5 KiB
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(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
|
|
}
|
|
},
|
|
mounted() {
|
|
this.currentTabbarIndex = this.indexs
|
|
// setTimeout(()=>{
|
|
// this.indexs=2
|
|
// },300)
|
|
|
|
},
|
|
methods:{
|
|
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
|
|
}
|
|
})
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cont {
|
|
position: fixed;
|
|
left: 60rpx;
|
|
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>
|