65 lines
1.1 KiB
Vue
65 lines
1.1 KiB
Vue
//my-tabbar文件
|
|
<template>
|
|
<view>
|
|
<u-tabbar
|
|
:value="currentTab"
|
|
:fixed="true"
|
|
:border="false"
|
|
activeColor="#0055a2"
|
|
:placeholder="false"
|
|
@change="changeTabIndex"
|
|
>
|
|
<u-tabbar-item
|
|
v-for="item in switchTabs"
|
|
:key="item.name"
|
|
:text="item.text"
|
|
:icon="item.iconName"
|
|
></u-tabbar-item>
|
|
</u-tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, reactive } from 'vue'
|
|
|
|
let props = defineProps({
|
|
currentTab: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
})
|
|
const switchTabs = reactive([
|
|
{
|
|
pagePath: '/pages/index/index',
|
|
iconName: 'home',
|
|
text: '首页',
|
|
name: 'home'
|
|
},
|
|
{
|
|
pagePath: '/pages/me/index',
|
|
iconName: 'account',
|
|
text: '我的',
|
|
name: 'account'
|
|
}
|
|
])
|
|
|
|
function changeTabIndex(e) {
|
|
let pagePath = switchTabs[e].pagePath
|
|
uni.switchTab({
|
|
url: pagePath
|
|
})
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep .u-tabbar__content {
|
|
background-color: #f2f2f2;
|
|
padding: 10rpx 0;
|
|
.u-icon__icon {
|
|
font-size: 54rpx !important;
|
|
}
|
|
.u-tabbar-item__text {
|
|
font-size: 38rpx;
|
|
}
|
|
}
|
|
</style>
|