vant UI之van-tab如何实现标题两行显示

前端小码农.2024-09-06 0:04

前言：

相必大家在开发移动端或者小程序时都会见到如下设计稿

这个时候大家基本上都会想到使用vant UI 的van-tab组件，如果实现不了那就自己封装一个tab组件这样的情况。其实使用van-tab是可以实现的，不过要借助van-tab的一系列api和css，下面就讲述如何借助api来实现这一设计稿。

解决：

先来看代码实现

html 复制代码

<van-tabs  
    line-width="48rpx" 
    title-inactive-color="#AEAEAE" 
    title-active-color="#363636" 
    active="{{ Index }}">
  <van-tab 
    title-style="white-space: normal; word-break: break-all; line-height:30rpx; width:100rpx;" 
    title="互动打卡赚取积分">
            456
  </van-tab>
</van-tabs>

css 复制代码

.van-ellipsis {
  font-size: 22rpx;
  display: flex;
  justify-content: center;
  margin-bottom: 10rpx;
}

.van-tabs__line {
  margin-bottom: -4rpx;
  background: #363636;
}

.van-tabs__nav {
  border-bottom: 4rpx solid rgba(215, 215, 215, 0.27);
}

相关api讲述：

tabs：

line-width：底部条宽度；

title-inactive-color：标题默认态颜色；

title-active-color：标题选中态颜色。

tab：

title：标题；

title-style：标题样式。
相关css讲解：

title-style：

word-break: break-all 当内容（比如很长的一个单词）到每行的末端时，它会把单词截断显示一部分，下一行显示后一部分；

line-height:30rpx 固定标题上下位置；

width:100rpx 限制标题的宽度使其换行；

white-space: normal 改变组件默认的css样式，使其变成normal。

wxss：

.van-ellipsis：标题的css类名，控制字体大小，flex布局居中换行；

.van-tabs__line：底部动态条类名，控制颜色和上下位置；

.van-tabs__nav：显示底部长条。

使用以上方法，可以完美解决tab标题换行和其他ui的实现，不用自己再去写一个tab栏。