小程序-未读消息
程序员文章站
2022-07-12 13:16:25
...
index.wxss
.zan-badge {
position: relative;
}
.zan-badge__count {
position: absolute;
top: -8px;
right: 0px;
height: 1.6em;
min-width: 1.6em;
line-height: 1.6;
padding: 0 .4em;
font-size: 10px;
font-family: tahoma;
border-radius: .8em;
background: #FF4444;
color: #fff;
text-align: center;
white-space: nowrap;
transform: translateX(50%);
transform-origin: -10% center;
z-index: 10;
box-shadow: 0 0 0 1px #fff;
box-sizing: border-box;
}
demo.wxml 业务中使用
<view class="demo__item">
<view class="demo__icon zan-badge">
<view class="zan-badge__count">9</view>
</view>
</view>
demo.wxss 需要引用的样式
.demo__icon {
margin: 0 auto;
width: 48px;
height: 48px;
background: #ddd;
border-radius: 4px;
}
上一篇: Apollo学习笔记(11)MPC
下一篇: Toolbar的消息未读小红点实现