Vant的Tabbar标签栏引入自定义图标方式
目录
- Tabbar标签栏引入自定义图标
- vant自义定Tabbar图标和颜色
Tabbar标签栏引入自定义图标
**使用*van-tabbar*组件**
*v-model*
绑定的是对应的Tabbar下标*active-color*
是未选中的文字颜色*inactive-color*
是已选中的文字颜色**route**
这个要特别注意,我就是在这踩了坑,我没有加这个参数,但是能正常跳转路由,但是图标选中会出现问题,每次都需要双击。一直以为是插槽的问题,后面才发现官方api的这个参数
*van-tabbar-item*每一个Tab标签 #icons 自定义图标的插槽 props.active 插槽的值,点击后为true,初始为false
<van-tabbar v-model="active" active-color="#42A46F" inactive-color="#999999" @change="onChange" route> <van-tabbar-item to="/myorder"> <span>我的预约</span> <template #icon="props"> <van-image :src="props.active ? require('@mobile/assets/images/index/aftericon1.png') : require('@mobile/assets/images/index/icon1.png')" /> </template> </van-tabbar-item> </van-tabbar>
vant自义定Tabbar图标和颜色
1.index代码:
<template> <div class="app-container"> <div class="layout-content"> <keep-alive> <router-view v-if="$route.meta.keepAlive" style="margin-bottom: 50px"/> </keep-alive> <router-view v-if="!$route.meta.keepAlive" style=" margin-bottom: 50px"/> </div> <!-- 底部导航组件 --> <div class="layout-footer"> <TabBar :data="tabbars" @change="handleChange"/> </div> </div> </template>
<script> import TabBar from '@/components/TabBar' export default { name: 'Home', computed: { key() { return this.$route.path } }, data() { return { pic: '@src/assets/images/home-black.png', cachedViews: 'Home', tabbars: [ { title: '首页', to: { name: 'Home' }, normal: require("../../src/assets/images/home_black.png"), active: require("../../src/assets/images/home_selected.png") }, { title: '模块', to: { name: 'Model' }, normal: require("../../src/assets/images/model_black.png"), active: require("../../src/assets/images/model_selected.png") }, { title: '关于我', to: { name: 'Mine' }, normal: require("../../src/assets/images/mine_black.png"), active: require("../../src/assets/images/mine_selected.png") } ] } }, components: { TabBar }, methods: { handleChange(v) { console.log('tab value:', v) } } } </script>
2.TabBar组件代码
<template> <div> <van-tabbar fixed route v-model="active" @change="handleChange"> <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index"> <span :class="defaultActive === index ? active:''">{{ item.title }}</span> <template slot="icon" slot-scope="props"> <img :src="props.active ? item.active : item.normal"> </template> </van-tabbar-item> </van-tabbar> </div> </template>
<script> export default { name: 'TabBar', props: { defaultActive: { type: Number, default: 0 }, data: { type: Array, default: () => { return [] } } }, data() { return { active: this.defaultActive } }, methods: { handleChange(value) { this.$emit('change', value) } } } </script>
<style scoped> .active_tab img { width: 26px; height: 26px; } /* 自定义选中的颜色 */ .van-tabbar-item--active { color: #d81e06; } </style>
3.运行效果图
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)