有bug 完善进度条

痛定思痛。 2023-06-12 04:11 52阅读 0赞

<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的大小的进度条

如图

![20191107103451136.gif][]

望大神指点迷津    = - =         = - =

[20191107103451136.gif]: /images/20230531/3b5ef87eecea4aca832213a6dda23f68.png