a

jiangping

2023-09-13 fe5676e374373813a11116a50db6f6819de64caa

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<template>
    <view>
        <view class="zw" :style="{ backgroundColor: color }"></view>
        <view class="tabbar">
            <view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
                <image :class="index === 1 ? 'item-img1 big' : 'item-img1'" :src="item.iconPath" v-if="current == index"></image>
                <image :class="index === 1 ? 'item-img1 big' : 'item-img1'" :src="item.icon" v-else></image>
                <view class="tabbar-item-y" v-if="index === 1"></view>
                <text :style="current == index ? 'color: #111111;' : ''" v-if="index !== 1">{{item.text}}</text>
            </view>
        </view>
    </view>
</template>
 
<script>
    export default {
        name: "tarbar",
        props: {
            current: String,
            color: String
        },
        data() {
            return {
                list: [
                    {
                        text: '首页',
                        icon: '/static/common/nav_home@2x.png',
                        iconPath: '/static/common/nav_home_sel@2x.png',
                        path: "/pages/index/index"
                    },
                    {
                        text: '回收',
                        icon: '/static/common/nav_yuyue@2x.png',
                        iconPath: '/static/common/nav_yuyue@2x.png',
                        path: "/packagesMine/reservation/reservation"
                    },
                    {
                        text: '我的',
                        icon: '/static/common/nav_wode@2x.png',
                        iconPath: '/static/common/nav_wode_sel@2x.png',
                        path: '/pages/mine/mine'
                    }
                ]
            }
        },
        methods: {
            tabbarChange(path) {
                if (path === '/packagesMine/reservation/reservation') {
                    uni.navigateTo({
                        url: path
                    });
                } else {
                    uni.switchTab({
                        url: path
                    });
                }
            }
        }
    }
</script>
 
<style scoped>
    .tabbarActive {
        color: #79D5AD !important;
    }
 
    .top {
        margin-top: 50rpx !important;
    }
    
    .zw {
        width: 100%;
        height: calc(118rpx + env(safe-area-inset-bottom));
        background-color: #F7F7F7;
    }
    
    .tabbar-item-y {
        position: absolute;
        top: -22rpx;
        left: 50%;
        width: 118rpx;
        height: 118rpx;
        border-radius: 50%;
        transform: translate(-50%, 0);
        background-color: #ffffff;
        box-shadow: inset 0px 2px 0px 0px #EEEEEE;
    }
 
    .tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 118rpx;
        background-color: #ffffff;
        box-shadow: inset 0rpx 2rpx 0rpx 0rpx #EEEEEE;
        z-index: 1111;
        padding: 0 0 env(safe-area-inset-bottom) 0;
    }
 
    .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        position: relative;
    }
    
    .tabbar-item .big {
        width: 110rpx;
        height: 110rpx;
        position: absolute;
        top: -20rpx;
        left: 50%;
        z-index: 1111;
        transform: translate(-50%, 0);
    }
    
    
    
    .tabbar-item text {
        font-size: 20rpx;
        font-weight: 400;
        color: #999999;
    }
 
    /* 选中后 */
    .item-img {
        width: 104rpx;
        height: 104rpx;
        border-radius: 50%;
        box-shadow: 0rpx 0rpx 10rpx 10rpx #EEEFF0;
    }
 
    /* 选中前 */
    .item-img1 {
        width: 44rpx;
        height: 44rpx;
        margin-top: 8rpx;
    }
</style>