详解Vue底部导航栏组件

 更新时间:2019年05月02日 10:18:05   作者:孤独浪人1  
这篇文章主要介绍了Vue底部导航栏的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

不多说直接上代码 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底部导航栏详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Element实现表格嵌套、多个表格共用一个表头的方法

    Element实现表格嵌套、多个表格共用一个表头的方法

    这篇文章主要介绍了Element实现表格嵌套、多个表格共用一个表头的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Vuex简单入门

    Vuex简单入门

    本篇文章主要介绍了初步认识理解Vuex,Vuex就是在一个项目中,提供唯一的管理数据源的仓库,有兴趣的可以了解一下
    2017-04-04
  • vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

    vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

    这篇文章主要介绍了vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue中的自定义分页插件组件的示例

    vue中的自定义分页插件组件的示例

    这篇文章主要介绍了vue中的自定义分页插件组件的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 关于移动端与大屏幕自适应适配方案

    关于移动端与大屏幕自适应适配方案

    这篇文章主要介绍了关于移动端与大屏幕自适应适配方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue和React有哪些区别

    Vue和React有哪些区别

    这篇文章主要介绍了Vue和React有哪些区别,帮助大家更好的理解和学习JavaScript框架,感兴趣的朋友可以了解下
    2020-09-09
  • vue移动端实现下拉刷新

    vue移动端实现下拉刷新

    我们通过原理讲解以及代码实例给大家分享了关于VUE实现移动下拉刷新的功能,有的朋友可以跟着学习下。
    2018-04-04
  • 全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作

    全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作

    这篇文章主要介绍了全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue 组件的挂载与父子组件的传值实例

    Vue 组件的挂载与父子组件的传值实例

    这篇文章主要介绍了Vue 组件的挂载与父子组件的传值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue实现大文件分片上传与断点续传到七牛云

    vue实现大文件分片上传与断点续传到七牛云

    这篇文章介绍了vue实现大文件分片上传与断点续传到七牛云的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06

最新评论