TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

Vant标签栏定制

zyz
2021-04-06
/
0 评论
/
38 阅读
/
正在检测是否收录...
04/06

一、Vant 标签栏

在Vant组件库中,有给我们提供了一个标签栏组件。

# App.vue组件中
<template>
    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
    </van-tabbar>
</template>

<script>
    # 导入需要使用的组件
    import {Tabbar, TabbarItem } from 'vant';
    
    export default{
        name: 'navBar',
        components:{    # 组件声明
            [Tabbar.name]:Tabbar,
            [TabbarItem.name]:TabbarItem
        },
    }
</script>

二、标签栏定制

首先显示的图标需要修改,这里可以使用到Vant组件库中的Icon 图标,找到对应图标修改van-tabbar-item元素的icon属性即可。

接着需要功能添加,即是标签栏点击的跳转,这就可以设置van-tabbar-item元素的to属性。

最后选中样式问题,设置van-tabbar元素的active-color属性。

<template>
        <van-tabbar v-model="active" active-color='red'>
            <van-tabbar-item icon="home-o" to='/home'>首页</van-tabbar-item>
            <van-tabbar-item icon="filter-o" to='/assort'>分类</van-tabbar-item>
            <van-tabbar-item icon="search" to='/search'>搜索</van-tabbar-item>
            <van-tabbar-item icon="cart-o" to='/cart' info="20">购物车</van-tabbar-item>
            <van-tabbar-item icon="contact" to='/mine'>我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
赞(0)
评论 (0)