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

前言:

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

这个时候大家基本上都会想到使用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栏。

相关推荐
开开心心loky39 分钟前
[iOS] push 和 present Controller 的区别
ui·ios·objective-c·cocoa
眠りたいです1 小时前
基于脚手架微服务的视频点播系统-播放控制部分
c++·qt·ui·微服务·云原生·架构·播放器
黑马源码库miui520868 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾8 小时前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
我命由我123459 小时前
Photoshop - Photoshop 创建文档
学习·ui·课程设计·设计·photoshop·ps·美工
六月的可乐10 小时前
【干货推荐】AI助理前端UI组件-悬浮球组件
前端·人工智能·ui
毕设源码-邱学长1 天前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue1 天前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长1 天前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
Thetimezipsby1 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro