uniapp---自定义tabBar

在用Uniapp做项目开发的时候，经常会遇到需要自定义tabbar来实现功能，下面是我写的基础tabbar组件。

<template>
    <view>
        <view class="main-home-tabbar">
            <view class="tabbar-item" :class="'home' == activeTab ? 'active' : ''" @click="handleTabBar('home')">
                <view class="item-icon"><image class="img" :src="'home' == activeTab ? '/static/home-active.png' : '/static/home.png'" lazy-load="true"></image></view>
                <view class="item-text">首页</view>
            </view>
            <view class="tabbar-item" :class="'service' == activeTab ? 'active' : ''" @click="handleTabBar('service')">
                <view class="item-icon"><image class="img" :src="'service' == activeTab ? '/static/service-active.png' : '/static/service.png'" lazy-load="true"></image></view>
                <view class="item-text">服务</view>
            </view>
            <view class="tabbar-item" :class="'message' == activeTab ? 'active' : ''" @click="handleTabBar('message')">
                <view class="item-icon"><image class="img" :src="'message' == activeTab ? '/static/message-active.png' : '/static/message.png'" lazy-load="true"></image></view>
                <view class="item-text">消息</view>
            </view>
            <view class="tabbar-item" :class="'mine' == activeTab ? 'active' : ''" @click="handleTabBar('mine')">
                <view class="item-icon"><image class="img" :src="'mine' == activeTab ? '/static/mine-active.png' : '/static/mine.png'" lazy-load="true"></image></view>
                <view class="item-text">我的</view>
            </view>
        </view>
    </view>
</template>

<script>
    import home from './home.vue'
    export default {
        components:{ home },
        data() {
            return {
                activeTab:'home'
            }
        },
        methods: {
            handleTabBar(tab){
                this.activeTab = tab;
            }
        }
    }
</script>

<style scoped lang="scss">
.main-home-tabbar{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 50px;
    display: flex;
    background: #fff;
    border-top: 1px solid #ddd;
    z-index: 100;
    padding: 4px 0 0px;
    .tabbar-item{
        width: 25%;
        text-align: center;
        .item-icon{
            text-align: center;
            height: 26px;
            .img{
                width: 25px;
                height: 25px;
            }
        }
        .item-text{
            height: 20px;
            text-align: center;
            font-size: 14px;
        }
        &.active{
            .item-text{
                color: #fe7e28;
            }
        }
    }
}
</style>

打完收工！