commonTabbar.vue
2.5 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
<template>
<u-tabbar
:value="tabbarValue"
:fixed="true"
:border="false"
:placeholder="true"
:safeAreaInsetBottom="true"
activeColor="#333"
inactiveColor="#999"
:zIndex="9999"
>
<u-tabbar-item name="home" text="首页" @click="navRouter('/pages/home/home')">
<image
style="width: 48rpx;height: 48rpx;"
slot="active-icon"
src="@/static/tabbarIcon/home_active.png"
mode="widthFix"
></image>
<image
style="width: 48rpx;height: 48rpx;"
slot="inactive-icon"
src="@/static/tabbarIcon/home.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/tabbarIcon/mall_active.png"
mode="widthFix"
></image>
<image
style="width: 48rpx;height: 48rpx;"
slot="inactive-icon"
src="@/static/tabbarIcon/mall.png"
mode="widthFix"
></image>
</u-tabbar-item>
<u-tabbar-item name="order" text="订单" @click="navRouter('/pages/order/order')">
<image
style="width: 48rpx;height: 48rpx;"
slot="active-icon"
src="@/static/tabbarIcon/order_active.png"
mode="widthFix"
></image>
<image
style="width: 48rpx;height: 48rpx;"
slot="inactive-icon"
src="@/static/tabbarIcon/order.png"
mode="widthFix"
></image>
</u-tabbar-item>
<u-tabbar-item name="data" text="数据" @click="navRouter('/pages/data/data')">
<image
style="width: 48rpx;height: 48rpx;"
slot="active-icon"
src="@/static/tabbarIcon/data_active.png"
mode="widthFix"
></image>
<image
style="width: 48rpx;height: 48rpx;"
slot="inactive-icon"
src="@/static/tabbarIcon/data.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/tabbarIcon/my_active.png"
mode="widthFix"
></image>
<image
style="width: 48rpx;height: 48rpx;"
slot="inactive-icon"
src="@/static/tabbarIcon/my.png"
mode="widthFix"
></image>
</u-tabbar-item>
</u-tabbar>
</template>
<script>
export default {
props: {
tabbarValue: {
type: String,
default: 'home'
}
},
name:"commonTabbar",
methods: {
navRouter(path, name){
uni.redirectTo({
url: path
})
}
}
}
</script>
<style lang="scss" scoped>
.u-page__item__slot-icon{
width: 48rpx;
}
</style>