tabbar.vue
1.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<template>
<view class="tabbar">
<up-tabbar
:value="activePath"
@change="handleTabChange"
:placeholder="true"
activeColor="#000"
:fixed="true"
>
<up-tabbar-item
v-for="(item, index) in tabList"
:key="index"
:text="item.text"
:name="item.path"
>
<template #active-icon>
<image :class="['icon', item.special ? 'mid-icon' : '']" :src="item.selectedIcon"></image>
</template>
<template #inactive-icon>
<image :class="['icon', item.special ? 'mid-icon' : '']" :src="item.icon"></image>
</template>
</up-tabbar-item>
</up-tabbar>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
const activePath = ref('pages/xunji/xunji');
// 配置化 Tabbar
const tabList = [
{
text: '训记',
path: 'pages/xunji/xunji',
icon: '/static/tabbar/xunji.png',
selectedIcon: '/static/tabbar/xunji-sel.png',
special: false,
},
{
text: '我的',
path: 'pages/user/user',
icon: '/static/tabbar/wode.png',
selectedIcon: '/static/tabbar/wode-sel.png',
special: false,
},
];
const handleTabChange = (name) => {
activePath.value = name;
uni.switchTab({ url: '/' + name });
};
onShow(() => {
const pages = getCurrentPages();
const currPage = pages[pages.length - 1];
if (currPage && !currPage.route.includes('entry')) {
activePath.value = currPage.route;
}
});
</script>
<style lang="scss" scoped>
.icon {
width: 48rpx;
height: 48rpx;
transition: all 0.2s;
}
</style>