77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<view class="custom-wrap">
|
||
|
|
|
||
|
|
<u-transition :show="current === 0" name="slide-right">
|
||
|
|
<Board v-if="current === 0" />
|
||
|
|
</u-transition>
|
||
|
|
<u-transition :show="current === 1" name="slide-right">
|
||
|
|
<FunModule v-if="current === 1" />
|
||
|
|
</u-transition>
|
||
|
|
<u-transition :show="current === 2" name="slide-right">
|
||
|
|
<About v-if="current === 2" />
|
||
|
|
</u-transition>
|
||
|
|
<u-tabbar :hideTabBar="false" v-model="current" active-color="var(--u-type-primary)" mid-button-size="60"
|
||
|
|
:list="list" :mid-button="false"></u-tabbar>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
ref,
|
||
|
|
watch
|
||
|
|
} from 'vue';
|
||
|
|
|
||
|
|
/* 加载TabBar组件
|
||
|
|
-------------------------------------------------------------*/
|
||
|
|
import Board from './board/index.vue'
|
||
|
|
import About from './about/index.vue'
|
||
|
|
import FunModule from './fun/index.vue'
|
||
|
|
// 定义响应式数据
|
||
|
|
const list = ref([{
|
||
|
|
iconPath: "home",
|
||
|
|
selectedIconPath: "home-fill",
|
||
|
|
text: "首页",
|
||
|
|
isDot: false,
|
||
|
|
customIcon: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
iconPath: "grid",
|
||
|
|
selectedIconPath: "grid-fill",
|
||
|
|
text: "功能",
|
||
|
|
midButton: true,
|
||
|
|
customIcon: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
iconPath: "account",
|
||
|
|
selectedIconPath: "account-fill",
|
||
|
|
text: "我的",
|
||
|
|
isDot: false,
|
||
|
|
customIcon: false,
|
||
|
|
},
|
||
|
|
])
|
||
|
|
|
||
|
|
const current = ref(2)
|
||
|
|
|
||
|
|
watch(current, (val) => {
|
||
|
|
switch (val) {
|
||
|
|
case 0:
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: '首页'
|
||
|
|
});
|
||
|
|
break
|
||
|
|
case 1:
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: '功能'
|
||
|
|
});
|
||
|
|
break
|
||
|
|
case 2:
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: '我的'
|
||
|
|
});
|
||
|
|
break
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
</style>
|