环形进度条实现

需求：本来想实现一个温度控制器，可拖拽和点击加减号控制温度，并且温度数值也会随之改变

如下效果：

最后参考ask.dcloud.net.cn/article/353… 文章实现了个简易版的温度控制器

实现代码

html

<template>
	<view class="content">
		<view class="circleprogress">
			<view class="wrapper">
				<view class="rightprogress" :style="{ transform: rightprogress}"></view>
			</view>
		</view>
		<view class="progresstext">{{progresstext}}%</view>
		<view class="section section_gap">
			
			<view class="body-view">
				<slider  @changing="sliderchange" @change="sliderchange" min="0" max="100" />
			</view>
			<view class="button">
				<view class="add">
					<view @click="add()">+</view>
				</view>
				<view class="decrease">
					<view @click="dearease()">-</view>
				</view>
			</view>
		</view>
	</view>
</template>

javaScript

<script>
	export default {
		data() {
			return {
				leftprogress: 'rotate(-45deg)',
				rightprogress: 'rotate(45deg)',
				progresstext: 0
			}
		},
		onLoad() {

		},
		methods: {
			add() {
				if (this.progresstext < 100) {
					this.progresstext += 5;
				}
				var val = this.progresstext;
				var deg = val / 100 * 180;
				if (deg <= 180) {
					this.rightprogress = 'rotate(' + (45 + deg) + 'deg)'
				}
			},
			dearease() {
				if (this.progresstext > 0) {
					this.progresstext -= 5;
				}
				var val = this.progresstext;
				var deg = val / 100 * 180;
				if (deg <= 180) {
					this.rightprogress = 'rotate(' + (45 + deg) + 'deg)'
				}
			}
		}
	}
</script>

Css

<style scoped>
	.content {
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		text-align: center;
		
	}

	.circleprogress {
		width: 100%;
		height: 450rpx;
		display: flex;
		justify-content: center;

	}

	.progresstext {
		font-size: 35px;
		font-weight: 500;
		margin: -160rpx auto 0;
	}

	.wrapper {
		margin-top: 120rpx;
		transform: rotate(-90deg);
		overflow: hidden;
	}

	.circleprogress .rightprogress {
		width: 160px;
		height: 160px;
		border: 20px solid rgb(245, 245, 245);
		border-bottom: 20px solid rgb(104, 178, 255);
		border-radius: 50%;

	}

	.circleprogress .rightprogress {
		border-left: 20px solid rgb(104, 178, 255);
		margin-left: -80px;
	}
	slider{
		position: absolute;
		visibility: hidden;
	}

	.button {
		position: absolute;
		width: 100%;
		top: 480rpx;
		left: 250rpx;
		display: flex;
		font-size: 24px;
		font-weight: 400;
		z-index: 999;
	}

	.add,.decrease {
		width: 60rpx;
		height: 60rpx;
		border-radius: 5px;
		text-align: center;
		line-height: 60rpx;
		margin-right: 130rpx;
		box-shadow: 2px 2px 4px 2.5px rgba(106, 106, 106, 0.15);
		
	}
</style>

实现效果如下：

确实差别有点大哈目前在思考如何实现拖拽效果

uniapp环形进度条

环形进度条实现

实现代码