vant中van-tabs使用中的小问题

1. 怎么去掉默认选中的效果

  • van-tabs默认情况下启用第一个标签,实际开发中不满足需求,想要点击后再进行选中
解决办法
  • 首先,在标签组数中,添加一个占位标签
  • 在样式中设置首个标签不显示
  • 代码如下:
//js 实际有意思的数据就是arr[1]
let arr = [{"name": "","title": "全部",},{"title": "经营管理","name": "abc"}
]//css
<style  lang="scss">:deep(.van-tab:first-of-type) {display: none;}
</style>

2.标签默认居中展示

  • 默认标签是居中展示,当标签数量比较少,比如一个的时候,标签还有几层嵌套时,就很奇怪,如图1
    图1

    改成左对齐就好一些,如图2
    图2

.van-tab {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;
}

3.嵌套层级多,会出现点击切换标签,不切换的现象,嵌套最好不要超过2层,亲测3层就不太灵了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/681527.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OPC :快速上手

本系列为OPC技术的快速上以及持续研究和技术实战专栏&#xff0c;将不定期更新。 本章节提供OPC系列技术博文的快速导航。 《OPC服务器简介和入门介绍》 《物联网平台如何为OPC服务器创造新生命力》 《OPC服务器开发之WtOPCSvr——开发文档&#xff08;1&#xff09;》 《OPC服…

自动控制原理学习--平衡小车的控制算法(二)

上一节 在matlab建模&#xff0c;这一节PID控制. 一、模型 直接先放一张matlab simulink的模型&#xff08;只有直线速度环和平衡环&#xff0c;串联PID&#xff09;&#xff0c;就在上一节的基础上加了两个PID。 二、PID控制 PID的好处就是可以不用动力学建模&#xff08;当…

Kubernetes学习-集群搭建篇(一) 搭建Master结点

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Kubernetes渐进式学习-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1. 前言 2. 集群搭建方式 3. 环境说明 4. 利用kubeadm初始化Ma…

【强训笔记】day14

NO.1 思路&#xff1a;用一个哈希表&#xff0c;先遍历s1&#xff0c;统计哈希表内的字符个数&#xff0c;在遍历s2&#xff0c;s2中的字符在哈希表中减去&#xff0c;如果哈希表中的字符个数小于0那么就输出No。 代码实现&#xff1a; #include <iostream> #include&…

文件名长度调整:指定文件重命名长度,优化你的文件存储体验

在数字时代&#xff0c;文件存储和管理是我们日常生活和工作中不可或缺的一部分。然而&#xff0c;随着文件数量的增加&#xff0c;文件名长度的管理变得尤为重要。合理的文件名长度不仅可以提高文件检索的效率&#xff0c;还能优化整体的存储体验。 为什么文件名长度很重要&am…

【UnityRPG游戏制作】Unity_RPG项目_玩法相关※

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;就业…

使用DBeaver连接postgreSql提示缺少驱动

重新安装电脑之后用dbeaver链接数据库的时候&#xff0c;链接PG库一直提示缺少驱动&#xff0c;当选择下载驱动的时候又非常非常慢经常失败&#xff0c;尝试了一下更改源然后下载库驱动就非常快了&#xff0c;当然也包括dbeaver的自动更新。 方法&#xff1a;点击菜单栏【窗口…

Golang 开发实战day13 - Reciver Functions

&#x1f3c6;个人专栏 &#x1f93a; leetcode &#x1f9d7; Leetcode Prime &#x1f3c7; Golang20天教程 &#x1f6b4;‍♂️ Java问题收集园地 &#x1f334; 成长感悟 欢迎大家观看&#xff0c;不执着于追求顶峰&#xff0c;只享受探索过程 Golang 开发实战day13 - 接收…

Rust 通用代码生成器莲花,红莲尝鲜版二十三,多对多候选,增强数据库反射项目功能

Rust 通用代码生成器莲花&#xff0c;红莲尝鲜版二十三&#xff0c;此版本新增了多对多候选功能&#xff0c;增强了数据库自动反射功能和模板向导的编辑器。请部署在 Tomcat9 的 webapps 目录下。 多对多候选功能大大增强了一个数据库自动反射成一个项目的功能&#xff0c;它可…

手机端如何生成gif?一个方法在线转换gif

当我们看到网络上好看个性的gif动画表情包的时候是不是也很想自己制作呢&#xff1f;很多小伙伴都不知道要怎么在手机上制作gif动图吧&#xff01;下面&#xff0c;给大家分享一款操作简单无需下载的动态图片在线制作&#xff08;https://www.gif.cn/&#xff09;的操作工具&am…

高端建站和普通建站有哪些不同

高端建站与普通建站之间存在着显著的差异&#xff0c;从设计到功能、用户体验以及服务质量等各个方面都有所区别。以下是高端建站和普通建站的不同之处&#xff1a; ### 1. 设计质量 - **高端建站**&#xff1a;注重精美、独特的设计风格&#xff0c;通常由专业设计师团队负责。…

深入理解网络原理5----HTTP协议

文章目录 一、HTTP协议格式二、HTTP请求2.1 URL 基本格式2.2 URL encode2.3 "方法" (method)2.4 认识请求 "报头" (header) 三、HTTP 响应3.1 "状态码" (status code) 四、HTPPS工作过程&#xff08;经典面试题&#xff09; 提示&#xff1a;以下…