<!--有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的大小的進度條
如圖
望大神指點迷津 = - = = - =