Vue 如何实现一个底部导航栏组件
2023-09-14 09:12:35 时间
参考网址: 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>
相关文章
- 实现简单前后端完全分离增删改查:node.js+mysql+vue
- Vue非父子组件传值「建议收藏」
- vue子组件给父组件传值
- vue子组件向父组件传值的方法
- Vue 箭头函数
- Vue组件
- Vue中iframe调用父页面的方法
- antd table编辑_vue修改组件样式
- 在 Vue 中,使用 $attrs 构建高级组件
- Vue-监听使用方法和过滤器
- 「后端小伙伴来学前端了」关于Vue中的自定义事件,组件绑定自定义事件实现通信
- 【Web技术】1445- 如何使用 Hooks 写出高质量的 React 和 Vue 组件?
- vue源码分析-动态组件_2023-02-27
- 富文本vue-quill-editor结合el-element实现自定义上传组件
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- Vue的异步更新实现原理是怎样的?
- vue组件通信方式有哪些?1
- Vue子组件向父组件传值this.$emit()
- vue入门篇之Vue.js 组件
- 电子商城网站平台(python+vue)可用作毕业设计+系统设计
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)