前言:
相必大家在开发移动端或者小程序时都会见到如下设计稿
这个时候大家基本上都会想到使用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栏。