《Vue应用开发》课件——6.2.2Vant中Tabbar组件.pptxVIP

先定一个小目标！

掌握Vant中Tabbar组件的使用方法，能够实现标签栏效果

6.2.2Vant中的常用组件

Vant组件提供了Tabbar组件，用于在不同页面之间进行切换，常放置在页面的底部。

6.2.2Vant中的常用组件

6.Tabbar组件

Tabbar组件使用van-tabbar标签定义，在该标签中使用van-tabbar-item定义每一个标签项。

van-tabbar标签的常用属性如下表所示。

属性名

描述

fixed

是否固定在底部，默认值为true

border

是否显示外边框，默认值为true

active-color

选中标签的颜色，默认值为#1989fa

inactive-color

未选中标签的颜色，默认值为#7d7e80

placeholder

固定在底部时是否在标签位置生成一个等高的占位元素，默认值为false

6.2.2Vant中的常用组件

演示一种基础的标签栏效果

创建src\components\Tabbar.vue文件，在Vant官方文档中找到Tabbar组件相关代码，复制部分核心代码到当前文件中。

步骤1

步骤2

6.2.2Vant中的常用组件

修改src\main.js文件，切换页面中显示的组件。

importAppfrom./components/Tabbar.vue

组件的文件名

步骤1

步骤2

6.2.2Van