Tab制作导航页面，分类信息导航

最终效果为：

GIF2222.gif

1:首先需要引入相关的组件

image.png

2:设置相关导航标题

image.png

3：使用组件

        <!-- 标签区域 -->
        <van-row>
            <van-col span="24">
                <van-tabs @click="onClick" sticky title-active-color="#E32DAB" color="#E32DAB" :line-width="100" :line-height="2">
                    <van-tab v-model="active" v-for="index in 7" :title="title[index]" :key="index.id" class="tab">
                        内容 {{ index }}
                    </van-tab>
                </van-tabs>
            </van-col>
        </van-row>

PS：使用组件过程中遇到的问题就是按官网的标题文档设置对应的Number类型的属性的时候报错，错误信息为：

Vue warn]: Invalid prop: type check failed for prop "lineWidth". Expected Number with value 100, got String with value "100".

解决问题点主要方式是需要再属性的签名加上'：'
即Number类型的属性

line-width="100"

改为

:line-width="100"

onClick是点击属性:

image.png

image.png