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即可。