微信小程序未读消息右上角红点数字显示

从weui中获得灵感，稍微改造，效果还不错
在消息数量为1-99时正常显示即可，而大于99时显示99+。使用wx:if搞定

wxml部分：

 <view class="buttom">

​    <view class="but_list" wx:for="{{listt}}" wx:key="*this">

​      <image src="{{item.img}}">image>

​      <text>{{item.tet}}text>


  

​      <text class="span" wx:if="{{item.digital>0&&item.digital<=99}}">{{item.digital}}text>

​      <text class="span" wx:elif="{{item.digital>99}}">99+text>

​    view>

  view>

---

---

wxss部分

​	.but_list {

  position: relative;

  /* margin-right: 10px; */

}

.but_list .span {

  position: absolute;

  /* 根据需要调整top和right */
  top: 0.8em;

  right: 0.8em;



  display: inline-block;

  padding: 0.15em 0.4em;

  min-width: 8px;

  border-radius: 18px;

  background-color: #fa5151;

  /* background-color: var(--weui-RED); */

  color: #fff;

  line-height: 1.2;

  text-align: center;

  font-size: 12px;

}

---

---

js部分：

 data: {

​    listt: [

​      {

​        img: "/photo/others/shibie.png",

​        tet: "识别记录",

​        digital: 0 //显示的数字

​      },

​      {

​        img: "/photo/others/shibie.png",

​        tet: "识别记录",

​        digital: 0

​      },

​      {

​        img: "/photo/others/shibie.png",

​        tet: "识别记录",

​        digital: 0

​      },

​      {

​        img: "/photo/others/shibie.png",

​        tet: "识别记录",

​        digital: 999



​      },

​      {

​        img: "/photo/others/shibie.png",

​        tet: "识别记录",

​        digital: 0

​      },

​      {

​        img: "/photo/others/shibie.png",

​        tet: "识别记录",

​        digital: 3

​      },

​      {

​        img: "/photo/others/shibie.png",

​        tet: "识别记录",

​        digital: 0

​      },

​      {

​        img: "/photo/others/shibie.png",

​        tet: "识别记录",

​        digital: 0

​      }

​    ],

  }

---

---

效果图：
注：用于练手写的代码，不足之处多多包涵。