详解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 相关文章推荐
菜单效果
Oct 14 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
JS交换变量的方法
Jan 21 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
微信小程序搭建自己的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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
Jquery 扩展方法
2010/05/06 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
用JS实现选项卡
2020/03/23 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
简单介绍Python中的JSON模块
2015/04/08 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
python爬取微博评论的实例讲解
2021/01/15 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
《雨点》教学反思
2014/02/12 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
追讨欠款律师函
2015/06/24 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书