81 lines
1.5 KiB
Vue
81 lines
1.5 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/lims/index/index',
|
|
iconName: 'home',
|
|
text: '首页',
|
|
name: 'home'
|
|
},
|
|
{
|
|
pagePath: '/pages/me/index',
|
|
iconName: 'account',
|
|
text: '我的',
|
|
name: 'account'
|
|
}
|
|
])
|
|
// const switchTabs = computed(() => {
|
|
// return [
|
|
// {
|
|
// pagePath: '/pages/lims/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>
|