Tabbar.vue
1.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<template>
<view>
<view class="tab flexA iosPadding Zindex">
<view class="item flexC" @click="toTab(1)">
<view class="flexA tabitembox" :class="{ blueBox: props.index === 1 }">
<image src="/static/images/tabbar/index11.png" mode="aspectFill" v-if="props.index === 1" />
<image src="/static/images/tabbar/index1.png" mode="aspectFill" v-else />
<view v-if="props.index === 1">首页</view>
</view>
</view>
<view class="item flexC" @click="toTab(2)">
<view class="flexA tabitembox" :class="{ blueBox: props.index === 2 }">
<image src="/static/images/tabbar/mine11.png" mode="aspectFill" v-if="props.index === 2" />
<image src="/static/images/tabbar/mine1.png" mode="aspectFill" v-else />
<view v-if="props.index === 2">我的</view>
</view>
</view>
</view>
<view style="height: 150rpx"></view>
</view>
</template>
<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits } from 'vue'
const props = defineProps({
index: {
type: Number
}
})
const emits = defineEmits(['toTop'])
const toTab = (toggleIdx: number) => {
if (toggleIdx === props.index) return
uni.switchTab({ url: ['/pages/index/index', '/pages/mine/mine'][toggleIdx - 1] })
}
</script>
<style lang="scss">
.tab {
width: 100%;
position: fixed;
left: 0rpx;
bottom: 0rpx;
height: 100rpx;
background-color: #fff;
// border-radius: 32rpx;
padding-top: 10rpx;
padding-bottom: 22rpx;
z-index: 10000;
}
.item {
width: 50%;
height: 100%;
flex-direction: column;
font-size: 18.75rpx;
color: #5d5d5d;
.blueBox {
box-sizing: border-box;
padding: 14rpx 36rpx;
border-radius: 136rpx;
border: 4rpx solid #e6e7ee;
background: #05b8d2;
}
.tabitembox {
color: #ffffff;
font-size: 30rpx;
font-weight: 700;
image {
width: 48rpx;
height: 48rpx;
margin-right: 10rpx;
}
}
}
</style>