微信小程序 图标的角标实现

先上效果图

实现原理就是一个view控件设置成类似于图中的样式，然后再固定在图标的右上方，原理比较简单， 下面贴上需要的代码。

wxml：

          <form bindsubmit="这是图标点击事件" report-submit="true">                
                <button class="iconBtn" form-type="submit">
                    <view class="remind-num" ">
                        12
                    </view>
                    <image class="icon-img" src="{{这是图标图片的url}}">
                    </image>
                    <view class="icon-text-view">这是图标</view>
                </button>
           </form>

wcss：

iconBtn{
    width: 100%;
    height: 130rpx;
    background: rgba(155, 155, 155, 0);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}
.iconBtn::after{
    border: none;
}
.remind-num{
	border-radius: 40%;
	position: absolute;
	top: 2rpx;
	right: 2rpx;
	font-size: 20rpx;
	/*padding: 4rpx 15rpx;*/
	/*align-items: center;*/
	text-align: center;

	width: 50rpx;
	line-height: 30rpx;
	height: 30rpx;
	color: var(--white);
	z-index: 100;
	background-color: rgba(221, 81, 76, 0.77);
}
.icon-img{
    margin-top: 10rpx;
    width: 65rpx;
    height: 65rpx;
}