html
<view class="water">
<view class="text">
完成率{{list.finish}}%
</view>
<view class="img" style="height: {{list.finish}}%">
<image src="../../image/water.jpg" mode="" />
<image src="../../image/water2.jpg" mode="" />
<image src="../../image/water.jpg" mode="" />
<image src="../../image/water2.jpg" mode="" />
</view>
</view>less
// 水球样式
.water {
margin-top: 20rpx;
border: 2px solid #45affa;
width: 200rpx;
height: 200rpx;
border-radius: 50%;
overflow: hidden;
position: relative;
// 球内文字
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
z-index: 1;
text-align: center;
color: rgb(255, 123, 0);
}
// 波浪
.img {
display: flex;
justify-content: start;
width: 300%;
background-color: #0096ff;
//控制完成率显示 定义到行内样式动态修改
height: 1%;
position: absolute;
bottom: 0;
animation: water 2s linear infinite;
image {
width: 100%;
height: 20rpx;
}
}
}
// 水波动画
@keyframes water {
0% {
transform: translateX(-300rpx);
}
100% {
transform: translateX(-0rpx);
}
}js
获取数据赋值就行文章来源：https://www.toymoban.com/news/detail-726455.html
文章来源地址https://www.toymoban.com/news/detail-726455.html
到了这里，关于水球展示——微信小程序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
