微信小程序上,实现图片右上角数字显示

微信小程序上,实现图片右上角数字显示

直接上代码:

样式代码index.wxss如下:

.circle_rednum {
  position: absolute;
  color: white;
  font-size: 13px;
  background-color: #EC2F43;
  width: 23px;
  height: 23px;
  line-height: 23px;
  left: 80%;
  top: -2px;
  text-align: center;
  -webkit-border-radius: 24px;
  border-radius: 24px;
}

前端代码index.wxml如下:

        
          
            
            

{{floatNewNum}}

99+

新工单

微信小程序的效果为:

 再分享一个html版本的css右上角显示带数字的圆圈的代码


    
        
        
        
    
    
        
3

效果如下:

微信小程序上,实现图片右上角数字显示_第1张图片

 

你可能感兴趣的:(微信小程序,小程序)