小程序wxml样式书写 带背景圆圈文字

Question

小程序wxml样式书写 带背景圆圈文字

<view class="cld-bottom">
   <text wx:for='{{slotArr}}' wx:key='index'>{{item.text}}
   </text>
</view>

/* pages/checkin/checkin.wxss */

.cld-bottom{
  height:calc(100% - 130rpx);
  padding:10rpx;
  padding-top:0;
  font-size:29rpx;
}
.cld-bottom text{
  position: relative;
  display: inline-block;
  text-align: center;
  width:13%;
  margin-left:1.5%;
  margin-top:44rpx;
}
.cld-bottom text:nth-child(7n-6){
  margin-left:0;
}

现效果图如下

希望做改动：在数字后设置底色圆框（分为上半下半）
大致效果如下22，但圆圈需分为上下，可根据js的不同情况渲染不同颜色

求样式该怎么书写

Answer 1

圆圈border-radius:50%，用wx.getSystemInfoSync()获取屏幕宽度，计算下宽度和高度。text容器改为view，示例如下
js

 
Page({
   data:{
     width:'',
     height:'',
    slotArr:[]
   },
   onLoad(){
     let screenWidth=wx.getSystemInfoSync().screenWidth;
     let padding=Math.floor(20*screenWidth/750);//容器padding转px
     let areaWidth=screenWidth-padding;//得到显示区域宽度
     let wh=Math.floor(areaWidth*.13);//每项日期宽度
     console.log(areaWidth,padding,screenWidth,wh)
     this.setData({width:wh+'px',height:wh+'px'})
     let slotArr=[];
     for(let i=1;i<=30;i++)slotArr.push({text:i});
     
     slotArr[3].cls='circle';//圆形样式，使用默认背景色

     slotArr[7].cls='circle';//圆形样式
     slotArr[7].bgColor='#f00';//设置红色背景

     this.setData({slotArr})
   }
})

wxml

<view class="cld-bottom">
   <view wx:for='{{slotArr}}' class="{{item.cls}}" wx:key='index' style="width:{{width}};height:{{height}};line-height:{{height}};background-color:{{item.bgColor}}">
   {{item.text}}
   </view>
</view>

wxss

.cld-bottom{
  height:calc(100% - 130rpx);
  padding:10rpx;
  padding-top:0;
  font-size:29rpx;
}
.cld-bottom view{
  position: relative;
  display: inline-block;
  text-align: center;
  width:13%;
  margin-left:1.5%;
  margin-top:44rpx;
}
.cld-bottom view:nth-child(7n-6){
  margin-left:0;
}
.cld-bottom view.circle{border-radius: 50%;color:#fff;background-color: #53acfc;}