效果:
代码:
<view>
<view class="levelGrow">
<view class="progress"></view>
</view>
<view class="inner">
<view>{
{level}}</view>
<view>成长值{
{growth}}/{
{nextGrowth}}</view>
<view>{
{nextLevel}}</view>
</view>
</view>
css:
.levelGrow{
width: 80%;
height: 60rpx;
line-height: 60rpx;
/* background-color: #3675F9; */
background-color: #ffffff;
opacity: 0.2;
position: relative;
margin-top: 30rpx;
}
.progress{
width: 60%;
height: 100%;
background-color: #3675F9;
position: absolute;
top: 0;
left: 0;
}
.inner{
z-index: 99;
width: 80%;
height: 60rpx;
line-height: 60rpx;
position: absolute;
top: 160rpx;
left: 0;
font-size: 24rpx;
font-weight: normal;
display: flex;
flex-direction: row;
justify-content: space-around;
}
实现原理就是z-index和position重叠实现
注意,progerss的width值可以使用js动态控制,根据数值计算出百分比,然后实现进度条的效果