uni-badge数字角标的显示问题

uni-badge数字角标的显示问题

前言

记录一下在开发需求时遇到的各种各样的小问题

提示：以下是本篇文章正文内容，下面案例可供参考

一、问题

开发的时候遇到了这个需求，需要把数字角标放在小括号的左边

但是看了一下插件和uniapp文档，发现并没有很兼容
参考网址：https://uniapp.dcloud.io/component/uniui/uni-list.html

但是可以使用自定义右侧插槽这个组件来完成

具体实现方法就是把右侧插槽的图片换成数字角标uni-badge（需要安装相应插件 https://ext.dcloud.net.cn/plugin?name=uni-link）和
https://ext.dcloud.net.cn/plugin?name=uni-badge
否则直接复制上去是空白不显示的！！！

二、使用步骤

1.代码

代码如下（示例）：

<view class="index-3" v-for="(xxzx,index) in xxzx" :key="index">
		<uni-list-item title="消息中心" link @tap="goMessagezx">
			<template v-slot:footer>
				<uni-badge class="uni-badge-left-margin" :text="xxzx.number" />
			</template>
		</uni-list-item>
	</view>
1
2
3
4
5
6
7

## 2.读入数据
mock代码如下（示例）：
export const xxzx = [
	
	{
	number:'20'
		},
	
	
]


---

# 总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了uni-list-item的使用.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18