代码如下:
<view class="con">
<van-tabs swipeable animated tab-class="tab-box" title-active-color="#A6894E" color="#DFBF7D">
<van-tab title="{{item.tabsName}}" wx:for="{{fatherList}}" wx:key="index" wx:for-index="index" class="tab">
<view class="van-wraper">
<!-- 共同css -->
<view class="" wx:for="{{item.list}}" wx:key="idx" wx:for-index="idx" class="van-item">
<view class="comm-left">
<image wx:if="{{item.imgUrl}}" src='{{item.imgUrl}}'></image>
<image wx:else src='../../static/img/no-data.png'></image>
</view>
<view class="comm-info">
<view class="title">{{item.title}}</view>
</view>
</view>
</view>
</van-tab>
</van-tabs>
</view>
css代码:
.con{
padding: 0 40rpx;
box-sizing: border-box;
}
.tab-box{
flex: none !important;
}
.van-wraper .van-item{
display:flex;
justify-content: flex-start;
}
.van-wraper .van-item:not(:first-child){
margin-top: 40rpx;
}
.van-wraper .van-item .comm-left{
margin-right: 22rpx;
}
.van-wraper .van-item .comm-left image{
width: 174rpx;
height: 226rpx;
}
.van-wraper{
margin-top: 40rpx;
}
.van-wraper .van-item .comm-info{
display:flex;
justify-content: flex-start;
flex-direction: column;
}
.van-wraper .van-item .comm-info .title{
font-size: 28rpx;
font-family: SourceHanSansCN-Bold;
color: #333333;
}
js:
data: {
fatherList: [
{
tabsName: '标签一',
list: [
{
imgUrl: '../../static/img/index-img.png',
title: 'xxx公司'
},
{
imgUrl: '../../static/img/index-img.png',
title: 'xxx公司'
},
{
imgUrl: '',
title: 'xxx公司'
}
]
},
{
tabsName: '标签二',
list: [
{
imgUrl: '../../static/img/index-img.png',
title: 'xxx公司'
},
{
imgUrl: '../../static/img/index-img.png',
title: 'xxx公司'
},
{
imgUrl: '',
title: 'xxx公司'
}
]
},
{
tabsName: '标签三',
list: [
{
imgUrl: '../../static/img/index-img.png',
title: 'xxx公司'
},
{
imgUrl: '../../static/img/index-img.png',
title: 'xxx公司'
},
{
imgUrl: '',
title: 'xxx公司'
}
]
}
]
},
注意当标签文字内容过长显示不全时,我们需要在标签上加上tab-class=“tab-box”,然后给tab-box给样式 flex: none !important;,当没加这个样式时,文字过长时会出现省略号,如下图所示:
当加上该类时的样式时显示如下:
整体页面效果如下: