详解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 相关文章推荐
javascript数字数组去重复项的实现代码
Dec 30 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
Three.JS实现三维场景
Dec 30 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
小程序实现搜索框
Jun 19 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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的FTP学习(三)
2006/10/09 PHP
基于php缓存的详解
2013/05/15 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Python 统计字数的思路详解
2018/05/08 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
浅谈django channels 路由误导
2020/05/28 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
办公室保洁员岗位职责
2013/12/02 职场文书
生活部的活动方案
2014/08/19 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
人事任命通知书
2015/04/21 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
详解Nginx 工作原理
2021/03/31 Servers
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript