评论

微信小程序view叠加效果

微信小程序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{




最终效果:


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


点赞 0
收藏
评论
登录 后发表内容