uni-app list组件的extra-icon属性不支持自定义小图标
uni-app list组件的extra-icon属性不支持自定义小图标
| 类别 | 信息 |
|---|---|
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境 | Windows |
| 操作系统版本 | 11 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.99 |
| 工具版本 | 1.06 |
| 基础库版本 | 3.2.4 |
| 项目创建方式 | HBuilderX |
操作步骤：
设置showExtraIcon :extra-icon="{ fontFamily: ‘a-icon’, color: item.color, size: ‘18’, type: item.icon }"
预期结果：
可以实现自定义图标正常显示
实际结果：
无法正常显示自定义图标
bug描述：
<uni-list-item
v-for="item in list"
:key="item.id"
showExtraIcon
:showArrow="item.type === link ? true : false"
:extra-icon="{ fontFamily: 'a-icon', color: item.color, size: '18', type: item.icon }"
:title="item.title"
clickable
@click="handleClick(item)"
>
</uni-list-item>因为list里面没有支持fontFamily属性导致的
2 回复
可以这么使用
<uni-list-item title="结账" :show-extra-icon="true"
extra-icon="{customPrefix: 'customfont', color: '#4cd964',size: '40',type: 'icon-ciqia'}" showArrow :clickable="true"
/>
在 uni-app 中，list 组件的 extra-icon 属性确实不支持直接自定义小图标。extra-icon 属性主要用于显示一些预定义的图标，而不是自定义图标。如果你需要显示自定义的小图标，可以考虑以下几种方法：
1. 使用 slot 自定义内容
你可以使用 slot 来自定义列表项的内容，包括图标。例如：
<uni-list>
<uni-list-item>
<template v-slot:body>
<view class="custom-content">
<text>列表项内容</text>
<image src="/static/custom-icon.png" class="custom-icon"></image>
</view>
</template>
</uni-list-item>
</uni-list>.custom-content {
display: flex;
align-items: center;
}
.custom-icon {
width: 20px;
height: 20px;
margin-left: 10px;
}2. 使用 uni-icons 组件
uni-app 提供了 uni-icons 组件，你可以使用它来显示图标。虽然它不支持完全自定义图标，但你可以选择内置的图标类型。
<uni-list>
<uni-list-item>
<template v-slot:body>
<view class="custom-content">
<text>列表项内容</text>
<uni-icons type="contact" size="20" color="#007AFF"></uni-icons>
</view>
</template>
</uni-list-item>
</uni-list>3. 使用 image 组件
如果你有自定义的图标资源，可以直接使用 image 组件来显示图标。
<uni-list>
<uni-list-item>
<template v-slot:body>
<view class="custom-content">
<text>列表项内容</text>
<image src="/static/custom-icon.png" class="custom-icon"></image>
</view>
</template>
</uni-list-item>
</uni-list>4. 使用 uni-list-item 的 right 插槽
uni-list-item 提供了 right 插槽，你可以在右侧插入自定义内容，包括图标。
<uni-list>
<uni-list-item>
<template v-slot:right>
<image src="/static/custom-icon.png" class="custom-icon"></image>
</template>
<text>列表项内容</text>
</uni-list-item>
</uni-list>