68 lines
1.3 KiB
Vue
68 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<TnTabbar v-model="currentTabbar" fixed>
|
||
|
|
<TnTabbarItem
|
||
|
|
v-for="(item, index) in tabbarData"
|
||
|
|
:key="index"
|
||
|
|
:icon="item.icon"
|
||
|
|
:active-icon="item.activeIcon"
|
||
|
|
:text="item.name"
|
||
|
|
@click="navigate(item)"
|
||
|
|
/>
|
||
|
|
</TnTabbar>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref,watch } from 'vue'
|
||
|
|
import TnTabbar from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar.vue'
|
||
|
|
import TnTabbarItem from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar-item.vue'
|
||
|
|
|
||
|
|
const currentTabbar = ref(0)
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
current?:0
|
||
|
|
}>()
|
||
|
|
|
||
|
|
// 导航栏数据
|
||
|
|
const tabbarData = ref([
|
||
|
|
{
|
||
|
|
name: '首页',
|
||
|
|
icon: 'home',
|
||
|
|
activeIcon: 'home-fill',
|
||
|
|
path:'/pages/index/index'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '关于',
|
||
|
|
icon: 'company',
|
||
|
|
activeIcon: 'company-fill',
|
||
|
|
path:'/pages/park/intro'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '动态',
|
||
|
|
icon: 'image-text',
|
||
|
|
activeIcon: 'image-text-fill',
|
||
|
|
path:'/pages/article/index?id=648'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '我的',
|
||
|
|
icon: 'my-circle',
|
||
|
|
activeIcon: 'my-circle-fill',
|
||
|
|
path:'/pages/ucenter/index'
|
||
|
|
},
|
||
|
|
])
|
||
|
|
|
||
|
|
const navigate = (item:any) => {
|
||
|
|
uni.redirectTo({
|
||
|
|
url:item.path
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(
|
||
|
|
()=>props.current,
|
||
|
|
(value) => {
|
||
|
|
currentTabbar.value = value
|
||
|
|
},{immediate:true}
|
||
|
|
)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
</style>
|