<template>
<view class="content">
<!-- <view class="circleprogress">
<view class="progresstext">{{progresstext}}%</view>
<view class="wrapper left">
<view class="leftprogress" :style="{ transform: leftprogress}"></view>
</view>
<view class="wrapper right">
<view class="rightprogress" :style="{ transform: rightprogress}"></view>
</view>
</view>
<view class="section section_gap">
<text class="section__title">设置最小/最大值</text>
<view class="body-view">
<slider @changing="sliderchange" @change="sliderchange" min="0" max="100" show-value />
</view>
</view>
<view class="wrapper right">
<view class="rightprogress" :style="{ transform: rightprogress}"></view>
</view>
<view class="circle">
<view class="circle1" :style="{ transform: fog}">
<view class="">
</view>
</view>
</view> -->
<view class="">
<circlr></circle>
</view>
<image src="../../static/aixinRed.png" mode=""></image>
</view>
</template>
<script>
export default {
data() {
return {
val: 0,
leftprogress: 'rotate(-45deg)',
rightprogress: 'rotate(45deg)',
progresstext: '0',
fog: 'rotate(45deg)',
n: 1
}
},
onLoad() {
// setInterval(()=>{
// this.n--
// this.fog = "rotate("+(45+this.n)+"deg)"
// },200)
},
watch: {
// val(new,old){}
},
methods: {
sliderchange: function(event) {
var val = event.detail.value;
this.progresstext = val;
console.log(val);
var deg = val / 100 * 360;
if (deg <= 180) {
this.rightprogress = 'rotate(' + eval(45 + deg) + 'deg)'
this.leftprogress = 'rotate(' + eval(-45) + 'deg)'
} else {
this.rightprogress = 'rotate(' + eval(45 + 180) + 'deg)'
this.leftprogress = 'rotate(' + eval(-45 + (deg - 180)) + 'deg)'
}
}
}
}
</script>
<style>
.circle1 {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
border: 20rpx solid #ccc;
border-right: 20rpx solid #000;
border-bottom: 20rpx solid #000;
}
.leftprogress,
.rightprogress {
width: 160px;
height: 160px;
border: 20px solid green;
border-bottom: 20px solid #7ef22e;
border-radius: 50%;
}
.wrapper {
width: 100px;
height: 200px;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-flow: wrap;
align-items: center;
border-radius: 50%;
text-align: center;
height: 400upx;
padding-top: 50px;
}
.circleprogress {
width: 100%;
height: 200px;
display: flex;
justify-content: center;
}
.progresstext {
position: absolute;
font-size: 40px;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
color: #008000;
}
.wrapper {
width: 100px;
height: 200px;
overflow: hidden;
}
.leftprogress {
border-right: 20px solid #7ef22e;
}
.rightprogress {
border-left: 20px solid #7ef22e;
margin-left: -100px;
}
.section {
width: 80%;
margin-top: 50px;
}
</style>
css+js实现圆环实时进度条功能
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
