参考网址: https://www.jianshu.com/p/088936b7b1bd/

Vue 如何实现一个底部导航栏组件

可以看到父组件是知道我点击了底部TabBar的哪个item的。

实现

实现template 和style

我用的布局工具是bootstrap,图标是阿里巴巴的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>

实现点击事件

在每个tab-bar-item的div上添加@click绑定点击事件并且传递当前是哪个item,第一个item就可以传一个tag=0的参数。实现如下:

<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进入选中的状态,也就是变亮,可以通过v-bind:class去做。data存一个数组放bool变量,因为第一个item肯定默认点亮,所以数组第一个元素为true。每次点击别的item时先把数组元素全部置位false,然后把选中的item所对应的数组元素改为true就可以实现选中效果。实现如下:

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>

Vue 如何实现一个底部导航栏组件的更多相关文章

  1. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  2. Flutter——BottomNavigationBar组件(底部导航栏组件)

    BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...

  3. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  4. 二、Fragment+RadioButton实现底部导航栏

    在App中经常看到这样的tab底部导航栏   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activi ...

  5. Android底部导航栏

    Android底部导航栏 今天简单写了一个底部导航栏,封装了一个库,用法比较简单 效果图 Github地址:https://github.com/kongqw/KqwBottomNavigation ...

  6. Android开源项目——带图标文字的底部导航栏IconTabPageIndicator

    接下来的博客计划是,在<Android官方技术文档翻译>之间会发一些Android开源项目的介绍,直接剩下的几篇Android技术文档发完,然后就是Android开源项目和Gradle翻译 ...

  7. TabHost实现底部导航栏

    源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/tabnavigation.zip          现在很多Android应用界面都采用底部导航 ...

  8. Flutter - 创建底部导航栏

    之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...

  9. Android商城开发系列(三)——使用Fragment+RadioButton实现商城底部导航栏

    在商城第一篇的开篇当中,我们看到商城的效果图里面有一个底部导航栏效果,如下图所示: 今天我们就来实现商城底部导航栏,最终效果图如下所示:   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使 ...

随机推荐

  1. C语言:最大公约数和最小公倍数

    #include <stdio.h> int main() { int a,b,c,m,t; printf("请输入两个数:\n"); scanf("%d%d ...

  2. Intellij idea 设置关闭自动更新

    目录结构: File -> Settings- -> Appearance & Behavior -> System Settings -> Updates 把Auto ...

  3. Java基础00-集合基础15

    1. 集合基础 1.1 集合概述 1.2 ArrayList构造方法和添加方法 代码示例: 想通过指定索引添加到最后一个位置的话就填写,现有索引的+1,比如3个索引就是4.如果在指定索引的位置添加没有 ...

  4. 在 Intenseye,为什么我们选择 Linkerd2 作为 Service Mesh 工具(Part.1)

    在 Intenseye,我们 follow(跟随) trends(趋势) & hype(最被炒作) 的技术,并在使用时应用最佳实践. 我们在用 Scala.Go.Python 等编写的 Kub ...

  5. Easyui动态添加控件无法渲染 $.parser.parse()无效

    本文链接:https://blog.csdn.net/huangbaokang/article/details/78367553动态添加easyui控件<input class="ea ...

  6. springMVC-3-获取参数

    RequestMapping修饰类 源码: 根据源码可以知道,requestmapping既可以修饰方法也可以修饰类 @Target({ElementType.METHOD, ElementType. ...

  7. PAT甲级:1089 Insert or Merge (25分)

    PAT甲级:1089 Insert or Merge (25分) 题干 According to Wikipedia: Insertion sort iterates, consuming one i ...

  8. 全站 HTTPS 就一定安全了吗?

    随着网络技术手段不断地更新迭代,互联网安全对于企业和个人的重要性都越来越高.因此越来越多的服务商都开始偏向为用户提供更安全的在线内容访问. 中间人攻击 为了保障网站内容安全,诞生了不少加密方式.目前应 ...

  9. C++第四十八篇 -- 字符串分离方法

    举例:Test_Bluetooth.exe -param_split Test_Bluetooth.cpp #include "pch.h" #include <iostre ...

  10. 15Java进阶 进程

    1 线程控制 t.join():让主线程进入线程池,等待t执行完才执行. t.sleep():让线程阻塞,休眠一段时间,休眠结束后进入就绪状态.不会释放锁. t.yield():让线程让出CPU,从运 ...