详解Vue底部导航栏组件


Posted in Javascript onMay 02, 2019

不多说直接上代码 BottomNav.vue:

<template>
	<div class="footer">
		<div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)">
			<img :src="index===idx?item.iconSelect:item.icon">
			<p :class="['colorChange',{on:index===idx}]" >{{item.name}}</p>
		</div>
 
	</div>
</template>
 
<script type="text/javascript">
	
	export default{
		props:['idx'],
		data(){
			return {
				items:[{
					cls:"home",
					name:"首页",
					push:"/home",
					icon:"../static/home.png",
					iconSelect:"../static/home_select.png"
				},
				{
					cls:"shares",
					name:"股票",
					push:"/shares",
					icon:"../static/home.png",
					iconSelect:"../static/home_select.png"
				},
				{
					cla:"community",
					name:"社区",
					push:"/community",
					icon:"../static/home.png",
					iconSelect:"../static/home_select.png"
				},
				{
					cla:"mine",
					name:"我的",
					push:"/mine",
					icon:"../static/home.png",
					iconSelect:"../static/home_select.png"
				}]
			}
		}
	} 
 
</script>

:src="index===idx?item.iconSelect:item.icon" 通过代码判断是否是当前页面,选择不通的图片

@click="$router.push(item.push) 跳转到各个页面

Style:

.footer{
	display: flex;
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	height: 6rem;
	background: #909090;
	width: 100%;}
	div{
		flex: 1;
		font-size: 30px;
	}
	div img{
		width: 30px;
		height: 30px;
	}
	div p{
		color:black;
	}
	.on{
		color: red;
	}

使用方式:

导入:

<BNai :idx="0">
	 			
</BNai>

以上所述是小编给大家介绍的Vue底部导航栏详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
vue分页插件的使用方法
Dec 25 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
微信小程序搭建自己的Https服务器
May 02 #Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 #Javascript
详解微信小程序网络请求接口封装实例
May 02 #Javascript
vue 搭建后台系统模块化开发详解
May 01 #Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 #Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 #Javascript
3分钟了解vue数据劫持的原理实现
May 01 #Javascript
You might like
PHP学习资料汇总与网址
2007/03/16 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
工作说明书格式
2014/07/29 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
八年级作文之感恩
2019/11/22 职场文书