cultivationApp/components/customTabbar/tabbar.vue

71 lines
1.7 KiB
Vue

<template>
<u-tabbar :value="value1" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true">
<u-tabbar-item @click="click1">
<template #active-icon>
<image class="u-page__item__slot-icon" src="/static/main/index/sydj.png"
style="width: 60rpx;height: 60rpx;"></image>
</template>
<template #inactive-icon>
<image class="u-page__item__slot-icon" src="/static/main/index/sy.png"
style="width: 60rpx;height: 60rpx;"></image>
</template>
</u-tabbar-item>
<u-tabbar-item @click="click1">
<template #active-icon>
<image class="u-page__item__slot-icon" src="/static/main/index/dkdj.png"
style="width: 60rpx;height: 60rpx;"></image>
</template>
<template #inactive-icon>
<image class="u-page__item__slot-icon" src="/static/main/index/dk.png"
style="width: 60rpx;height: 60rpx;"></image>
</template>
</u-tabbar-item>
<u-tabbar-item @click="click1">
<template #active-icon>
<image class="u-page__item__slot-icon" src="/static/main/index/wddj.png"
style="width: 60rpx;height: 60rpx;"></image>
</template>
<template #inactive-icon>
<image class="u-page__item__slot-icon" src="/static/main/index/wd.png"
style="width: 60rpx;height: 60rpx;"></image>
</template>
</u-tabbar-item>
</u-tabbar>
</template>
<script setup>
import store from "@/store/index.js"
import {
ref
} from "vue"
const value1 = ref(store.state.tabbrIndex)
const click1 = (e) => {
store.dispatch('changeTabbar', e)
if (e == 0) {
uni.switchTab({
url: '/pages/index/index'
})
}
if (e == 1) {
uni.switchTab({
url: '/pages/index/manager'
})
}
if (e == 2) {
uni.switchTab({
url: '/pages/index/personal'
})
}
}
</script>
<style>
</style>