搭建小程序商城_详解Vue底部导航栏组件

来源: 搭建小程序商城      作者:jianzhan      发布时间:
详解Vue底部导航栏组件       这篇文章主要介绍了Vue底部导航栏的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
div v-for='(item,index) of items' : @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{ pro凡科抠图:['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底部导航栏详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！

相关阅读