commonTabbar.vue
2.6 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<u-tabbar
:value="tabbarValue"
:fixed="true"
:border="false"
:placeholder="true"
:safeAreaInsetBottom="true"
:activeColor="ThemeColor.PrimaryColor"
inactiveColor="#888"
:zIndex="9999"
>
<u-tabbar-item name="home" text="首页" @click="navRouter('/pages/home/home')">
<image
style="width: 48rpx;height: 48rpx;"
slot="active-icon"
src="@/static/tabbar/House_active.png"
mode="widthFix"
></image>
<image
style="width: 48rpx;height: 48rpx;"
slot="inactive-icon"
src="@/static/tabbar/House.png"
mode="widthFix"
></image>
</u-tabbar-item>
<u-tabbar-item name="booking" text="订场" @click="navRouter('/pages/booking/booking')">
<image
style="width: 48rpx;height: 48rpx;"
slot="active-icon"
src="@/static/tabbar/Timer_active.png"
mode="widthFix"
></image>
<image
style="width: 48rpx;height: 48rpx;"
slot="inactive-icon"
src="@/static/tabbar/Timer.png"
mode="widthFix"
></image>
</u-tabbar-item>
<u-tabbar-item name="aboutSphere" text="约球" @click="navRouter('/pages/aboutSphere/aboutSphere')">
<image
style="width: 48rpx;height: 48rpx;"
slot="active-icon"
src="@/static/tabbar/Basketball_active.png"
mode="widthFix"
></image>
<image
style="width: 48rpx;height: 48rpx;"
slot="inactive-icon"
src="@/static/tabbar/Basketball.png"
mode="widthFix"
></image>
</u-tabbar-item>
<u-tabbar-item name="mall" text="商城" @click="navRouter('/pages/mall/mall')">
<image
style="width: 48rpx;height: 48rpx;"
slot="active-icon"
src="@/static/tabbar/shopping_active.png"
mode="widthFix"
></image>
<image
style="width: 48rpx;height: 48rpx;"
slot="inactive-icon"
src="@/static/tabbar/shopping.png"
mode="widthFix"
></image>
</u-tabbar-item>
<u-tabbar-item name="my" text="我的" @click="navRouter('/pages/my/my')">
<image
style="width: 48rpx;height: 48rpx;"
slot="active-icon"
src="@/static/tabbar/SmileyWink_active.png"
mode="widthFix"
></image>
<image
style="width: 48rpx;height: 48rpx;"
slot="inactive-icon"
src="@/static/tabbar/SmileyBlank.png"
mode="widthFix"
></image>
</u-tabbar-item>
</u-tabbar>
</template>
<script>
import ThemeColor from '../utils/themeColor';
export default {
props: {
tabbarValue: {
type: String,
default: 'home'
}
},
name:"commonTabbar",
data(){
return {
ThemeColor
}
},
methods: {
navRouter(path, name){
uni.redirectTo({
url: path
})
}
}
}
</script>
<style lang="scss" scoped>
.u-page__item__slot-icon{
width: 48rpx;
}
</style>