Badge 微标

Badge 徽标数?

????????一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。

? ? ? ? 详情请参考文档?Badge 徽标数 | uView - 多平台快速开发的UI框架 - uni-app UI框架

一、实现思路

? ? ? ? 1.将需要实现效果的图片和需要实现组件效果

? ? ? ? 2.放在同一个div中，在js中添加value值的效果

二、实现步骤

????????①view部分展示

????????

	<view class="message-icon" @click="message">
					<image src="@/static/circle/message1.png" mode="aspectFill"></image>
					<!-- 自定义微标 -->
					<!-- https://uviewui.com/components/badge.html -->
					<u-badge :type="type" max="99" :value="value" absolute :offset="[0,0]"></u-badge>
						<!-- <u-badge :is-dot="true" type="error" absolute :offset="[0,0]"></u-badge> -->
				</view>

????????②JavaScript 内容

return {
		type: "warning",
		value: 100, //超过最大值会显示 99+

			}

????????③css中样式展示

.message-icon {
		position: relative;
		width:50px;
		height: 50px;
		flex-shrink: 0;

		// background-color: #eee;
		image {
			width: 100%;
			height: 100%;
		}
	}

三、效果展示

? ? ? ??

四、小结 + 注意事项

????????此组件内部默认为absolute绝对定位，所以需要给badge父组件(元素)设置position: relative相对定位， 再通过调整offset偏移值(数组，两个元素，第一个元素为top值，第二个元素为right值，单位rpx，可为负值，如"[-10, -10]")设置到合适的位置即可。
????????如果不需要组件内容默认的自动绝对定位，设置absolute参数为false即可。