时间:2021-05-25
不多说直接上代码 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底部导航栏详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Vue导航栏用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏
当我们需要做一个类似顶部或底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件,并且改变导航栏按钮的样式,如果用跳转的时候,我们可以这样做,改变rou
本文实例为大家分享了Vue实现导航栏菜单的具体代码,供大家参考,具体内容如下这里是刚学习vue的时候,没有用vue的任何UI组件库写的导航栏菜单。menu.ht
最近利用vue第三方UIMuseUI开发webapp,然后在导航栏这里出现了问题,我需要在导航栏上的几个路由上显示底部导航栏,在其他路由上不显示,就这个问题,M
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能。