演示效果

演示效果

可以看到父組件是知道我點擊了底部TabBar的哪個item的。

實現(xiàn)

實現(xiàn)template 和style

我用的布局工具是bootstrap，圖標(biāo)是阿里巴巴的iconfont

<template>
    <div id="TabBar" class="tab-bar row">
        <div class="col-xs-4 tab-bar-item">
            <div class="row">
                <i class="iconfont icon-daohangshouye"></i>
            </div>
            <div class="row">
                <span>首頁</span>
            </div>
        </div>
        <div class="col-xs-4 tab-bar-item">
            <div class="row">
                <i class="iconfont icon-shangjia"></i>
            </div>
            <div class="row">
                <span>商戶</span>
            </div>
        </div>
        <div class="col-xs-4 tab-bar-item">
            <div class="row">
                <i class="iconfont icon-huiyuan"></i>
            </div>
            <div class="row">
                <span>我的</span>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .tab-bar {
        background-color: white;
        height: 54px;
        border: 0 solid rgb(210, 210, 210);
        border-top-width: 1px;
        position: fixed;
        margin: auto;
        bottom: 0;
        width: 100%;
    }

    .tab-bar-item {
        height: 54px;
    }

    i {
        font-size: 25px;
    }
</style>

實現(xiàn)點擊事件

在每個tab-bar-item的div上添加@click綁定點擊事件并且傳遞當(dāng)前是哪個item，第一個item就可以傳一個tag=0的參數(shù)。實現(xiàn)如下:

<div class="col-xs-4 tab-bar-item" @click="didClickedItem(0)">
    <div class="row">
        <i class="iconfont icon-daohangshouye"></i>
    </div>
    <div class="row">
        <span>首頁</span>
    </div>
</div>

didClickedItem: function (tag) {
                if (tag === 0) {

                } else if (tag === 1) {

                } else if (tag === 2) {
                    
                }
            }

點擊完肯定需要讓那個item進(jìn)入選中的狀態(tài)，也就是變亮，可以通過v-bind:class去做。data存一個數(shù)組放bool變量，因為第一個item肯定默認(rèn)點亮，所以數(shù)組第一個元素為true。每次點擊別的item時先把數(shù)組元素全部置位false，然后把選中的item所對應(yīng)的數(shù)組元素改為true就可以實現(xiàn)選中效果。實現(xiàn)如下:

data: function () {
            return {
                actives: [true, false, false]
            }
        }

<div class="col-xs-4 tab-bar-item" @click="didClickedItem(0)" v-bind:class="{active: actives[0]}">
    <div class="row">
        <i class="iconfont icon-daohangshouye"></i>
    </div>
    <div class="row">
        <span>首頁</span>
    </div>
</div>

didClickedItem: function (tag) {
                this.actives = this.actives.map(function () {
                    return false;
                });
                this.actives[tag] = true;
            }

.active {
        color: #1E90FF;
    }

對外暴露方法

選中一個item肯定需要讓父組件知道你選了什么，所以肯定要對外暴露方法，這個方法在didClickedItem這個方法最后一行加一行代碼即可

# TabBar組件里
this.$emit('select-item', tag);

# 父組件使用方法
<template>
  <div id="app">
    <div style="font-size: 20px">{{item}}</div>
    <TabBar @select-item="onClickTabBarItem"/>
  </div>
</template>

<script>
import TabBar from './components/TabBar'

export default {
    name: 'app',
    data: function () {
        return {
            item: 0
        }
    },
    components: {
        TabBar
    },
    methods: {
        onClickTabBarItem: function (tag) {
            this.item = tag;
        }
    }
}
</script>

完整代碼

<template>
    <div id="TabBar" class="tab-bar row">
        <div class="col-xs-4 tab-bar-item" @click="didClickedItem(0)" v-bind:class="{active: actives[0]}">
            <div class="row">
                <i class="iconfont icon-daohangshouye"></i>
            </div>
            <div class="row">
                <span>首頁</span>
            </div>
        </div>
        <div class="col-xs-4 tab-bar-item" @click="didClickedItem(1)" v-bind:class="{active: actives[1]}">
            <div class="row">
                <i class="iconfont icon-shangjia"></i>
            </div>
            <div class="row">
                <span>商戶</span>
            </div>
        </div>
        <div class="col-xs-4 tab-bar-item" @click="didClickedItem(2)" v-bind:class="{active: actives[2]}">
            <div class="row">
                <i class="iconfont icon-huiyuan"></i>
            </div>
            <div class="row">
                <span>我的</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TabBar",
        props: {

        },
        data: function () {
            return {
                actives: [true, false, false]
            }
        },
        methods: {
            didClickedItem: function (tag) {
                if (tag === 0) {
                    this.actives = this.actives.map(function () {
                        return false;
                    });
                    this.actives[0] = true;
                } else if (tag === 1) {
                    this.actives = this.actives.map(function () {
                        return false;
                    });
                    this.actives[1] = true;
                } else if (tag === 2) {
                    this.actives = this.actives.map(function () {
                        return false;
                    });
                    this.actives[2] = true;
                }
                this.$emit('select-item', tag);
            }
        }
    }
</script>

<style scoped>
    .tab-bar {
        background-color: white;
        height: 54px;
        border: 0 solid rgb(210, 210, 210);
        border-top-width: 1px;
        position: fixed;
        margin: auto;
        bottom: 0;
        width: 100%;
    }

    .tab-bar-item {
        height: 54px;
    }

    .active {
        color: #1E90FF;
    }

    i {
        font-size: 25px;
    }
</style>