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