小程序-未读消息

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;
}