Vue底部导航icon图标或图标切换功能实现
功能需求:底部导航切换页面,同时切换图片。底部为公共组件通过click点击事件获取下标来进行类名动态切换图标。这里之所以使用v-show,因为底部导航要进行频繁的切换。<template><footer class="footer"><ul><liv-for="(item, index) of...
·
功能需求:底部导航切换页面,同时切换图片。底部为公共组件
通过click点击事件获取下标来进行类名动态切换图标。这里之所以使用v-show,因为底部导航要进行频繁的切换。
<template>
<footer class="footer">
<ul>
<li
v-for="(item, index) of list"
:key="index"
:class="{active:index == num}"
@click="addClassName(index)"
>
<router-link :to="item.path">
//图片也是一样的道理,把span标签换成img即可。
<span v-show="num!=index" :class="item.icon"></span>
<span v-show="num==index" :class="item.active"></span>
<p>{{ item.name }}</p>
</router-link>
</li>
</ul>
</footer>
</template>
<script>
export default {
data() {
return {
list: [
{
icon: "iconfont icon-wode", //原始显示的图标
active: "iconfont icon-shouye", //点击之后要显示的图标
name: "首页",
path: "/home"
},
{
icon: "iconfont icon-icon",
active: "iconfont icon-gouwuche",
name: "分类",
path: "/kind"
},
{
icon: "iconfont icon-gouwuche",
active: "iconfont icon-icon",
name: "购物车",
path: "/cart"
},
{
icon: "iconfont icon-wode",
active: "iconfont icon-shouye",
name: "我的",
path: "/user"
}
],
num: 0,
tabName: ""
};
},
mounted() {
},
methods: {
addClassName: function(index) {
console.log(index);
this.num = index;
}
}
};
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)