默认u-tabs不支持item类型为图片，源代码也明确只显示text，因此需要修改u-tabs源代码，增加插槽功能：
<!–这是为了支持图片和文字混合而增加的插槽，切在下方text增加了v-else–>
<slot
name=”item”
:item=”item”
:index=”index”
v-if=” $slots.item || $scopedSlots.item”
/>
<text
:class=”[item.disabled && ‘u-tabs__wrapper__nav__item__text–disabled’]”
class=”u-tabs__wrapper__nav__item__text”
:style=”[textStyle(index)]” v-else
>{{ item[keyName] }}</text>
使用时案例如下：
<u-tabs :scrollable=”true” :list=”computedList” :paddingWidth=”40″ lineWidth=”55rpx” @click=”tabChange”
lineHeight=”7″ :lineColor=”`url(${lineBg}) 100% 100%`” :activeStyle=”{
color: ‘#000000’,
fontWeight: ‘bold’,
transform: ‘scale(1.1)’,
}” :inactiveStyle=”{
color: ‘#545454’,
transform: ‘scale(1)’,
fontSize: ’28rpx’,
}” itemStyle=”padding-left: 40rpx; padding-right: 40rpx; height: 55rpx;” :current=”current”>
<!–为了支持插槽修改了u-tabs源代码–>
<template #item=”{ item, index }”>
<view v-if=”index === 1″ class=”custom-tab-item”>
<image :src=”current === index ? item.activeImage : item.image” mode=”aspectFit” class=”tab-image”></image>
</view>
<view v-else class=”custom-tab-item”>
<text :class=”current === index ? ‘active-text’ : ‘inactive-text'”>
{{ item.name }}
</text>
</view>
</template>
</u-tabs>
style如下：
.custom-tab-item {
display: flex;
align-items: center;
justify-content: center;
height: 55rpx; // ←←← 关键：与 itemStyle.height 一致
width: 100%;
}
.tab-image {
width: 120rpx; // 按实际设计调整
height: 36rpx; // 不要超过 55rpx
// 如果图片是 logo 类，建议固定宽高比
}
/* 文字样式（你已有，保留即可） */
.active-text {
color: #F85252;
font-weight: bold;
font-size: 28rpx;
}
.inactive-text {
color: #BFBFBF;
font-size: 28rpx;
}