首页 前端知识 使用vant-tabs改变active-tab样式

使用vant-tabs改变active-tab样式

2024-06-20 00:06:38 前端知识 前端哥 368 715 我要收藏

需求

自定义激活 tab 后的样式,这里是需要激活tab字体变粗,字号变大。

失败的举措

直接改变font的属性,导致在边界问题上出现了换行或显示完全的情况。

  • 失败的效果:
    异常情况
  • 默认的效果
    正常情况

失败的原因

tabs 初始化的时候已经确定了单个tab的大小,直接改变字体大小对于内容比较长的tab来说可能会超出边界,就出现了上述情况。

最终解决方案

  • 最终效果
    最终效果
    通过计算激活字体大小与默认字体大小的比值,例如需求默认字号15px 激活tab的字号18px,那么直接使用scale CSS3属性放大:
.active {
	transform: scale(1.2);
}

小结

实现视觉效果的方案有很多种,尝试不用方案达到最好的兼容效果。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12903.html
标签
评论
发布的文章

jQuery实现简单抽奖大转盘

2024-07-01 23:07:44

jQuery思维导图

2024-07-01 23:07:43

在jQuery中添加表格行

2024-07-01 23:07:36

jquery数据类型转换

2024-07-01 23:07:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!