小型电商页面实践-Vant UI框架实践-（6）Tab 标签制作导航

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

最终效果为：

GIF2222.gif

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

image.png

2:设置相关导航标题

image.png

3：使用组件

        
        
            
                
                    
                        内容 {{ index }}
                    
                
            
        

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