54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<template>
|
|
<view class="bottom-tabbar">
|
|
<view
|
|
v-for="item in items"
|
|
:key="item.value"
|
|
class="tabbar-item"
|
|
:class="{active: item.value === modelValue}"
|
|
@click="$emit('update:modelValue', item.value)"
|
|
>
|
|
<uv-icon :name="item.icon" :color="item.value === modelValue ? '#2885ff' : '#888'" size="22" />
|
|
<view class="name">{{ item.label }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
required: true
|
|
}
|
|
});
|
|
const emit = defineEmits(['update:modelValue']);
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.bottom-tabbar {
|
|
position: fixed;
|
|
left: 0; right: 0; bottom: 0;
|
|
display: flex;
|
|
height: 104rpx;
|
|
background: #fff;
|
|
border-top: 1px solid #f0f0f0;
|
|
z-index: 99;
|
|
}
|
|
.tabbar-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #888;
|
|
font-size: 12px;
|
|
}
|
|
.tabbar-item.active {
|
|
color: #2885ff;
|
|
}
|
|
.name {
|
|
margin-top: 7rpx;
|
|
}
|
|
</style>
|