微信小程序view叠加效果
发布于 4 年前 作者 yongfeng 2412 次浏览 来自 分享

需要实现如下效果:

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{

最终效果:

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

回到顶部