<!--有bug 没有整体让进度变小,出现偏差 -->
<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>
</template>
<script>
export default {
data() {
return {
leftprogress: 'rotate(-45deg)',
rightprogress: 'rotate(45deg)',
progresstext: '60'
}
},
onLoad() {
// setTimeout在60秒后执行clearInterval清除定时器的操作
this.showText = false
var interval = setInterval(() => {
--this.progresstext
var that = this
var val = that.progresstext;
console.log("当前时间", val);
var deg = val / 60 * 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)'
}
}, 1000)
setTimeout(() => {
clearInterval(interval)
this.showText = true
uni.showLoading({
title: '阅读完成!+5趣币',
})
}, 60000)
},
methods: {
}
}
</script>
<style>
.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: #000000;
}
.wrapper {
width: 100px;
height: 200px;
overflow: hidden;
}
.leftprogress,
.rightprogress {
width: 160px;
height: 160px;
border: 20px solid #FC8511;
border-bottom: 20px solid #FFFFFF;
border-radius: 50%;
}
.leftprogress {
border-right: 20px solid #FFFFFF;
}
.rightprogress {
border-left: 20px solid #FFFFFF;
margin-left: -100px;
}
.section {
width: 80%;
margin-top: 50px;
}
</style>
不知道你们有没有听懂 额 (我得语文...需要重修了)
功能:
想要实现的效果就是使用上述的代码实现一个60upx的大小的进度条
如图
望大神指点迷津 = - = = - =
