底部导航栏-uniapp

成品图

 

代码如下

<template>
    <view class="content">
        <!-- 底部导航栏 -->
        <view class="nav-tab">
            <view class="nav-tab-item" :class="{'active':activeIndex == index}" v-for="item,index in nav_items" :key="index" @tap="activeIndex = index">
                <i class="nav-tab-item_icon iconfont" :class="item.icon"></i>
                <text class='nav-tab-item_label'>{{item.label}}</text>
            </view>
        </view>        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex:0,
                nav_items:[
                    {icon:'icon-dingdan1', label:'订单'},
                    {icon:'icon-chepai', label:'车辆识别'},
                    {icon:'icon-wode', label:'我的'},
                ]
            }
        },
    }
</script>
<style lang="scss">
    @import "@/common/iconfont.css";
    
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        .nav-tab{
            width: 100%;
            height: 200rpx;
            background-color: #Aff;
            color: #8f8f94;
            position: relative;
            
            // 居中
            display: flex;            
            overflow: hidden;
            
            .nav-tab-item {
                width: 34%;
                height: 80%;
                
                margin: 32rpx;
                
                z-index: 2;
                transition: .3s;
                cursor: pointer;

                
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;                
                
                .nav-tab-item_icon {
                    font-size: 80rpx;
                    color: #4298e7;
                    transition: .3s;
                    transform: translate(0,0rpx);
                }
                .nav-tab-item_label{
                    font-size: 32rpx;
                    color: #4298e7;
                    user-select: none;
                }                
            }
        }
    }
.active {
    transform: translate(0,-10rpx);
    background-color: rgba(255, 255, 255, .5);
    border-radius: 16rpx;
    margin: 32rpx;
}
.active .nav-tab-item_label{
    transition: 0.3s;
}
    
</style>