需要实现如下效果:

微信小程序view叠加效果

WXML代码如下:

<view class='evaluationContentItemLayout'>

<text class='evaluationContentText'>{{item.name}}({{item.total}})</text>

<progress class='evaluationContentProgress' percent='{{item.progress}}' stroke-width='26' backgroundColor='#fff' color='#09BB07'></progress>

</view>

WXSS代码如下:

.evaluationContentItemLayout{

width: auto;

height: auto;

position: relative;

}

.evaluationContentText {

font-size: 28rpx;

color: #101010;

position: absolute;

margin-left: 10rpx;

top: 5rpx;

}

.evaluationContentProgress{

}

最终效果:

颜色效果比较容易实现,故未做记录。

微信小程序view叠加效果

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-09-12
  • 2021-12-10
  • 2021-11-23
  • 2021-05-27
  • 2021-11-05
猜你喜欢
  • 2022-02-21
  • 2021-08-31
  • 2021-04-18
  • 2021-06-22
  • 2021-10-01
  • 2021-12-23
相关资源
相似解决方案