uniapp做一个围绕圆形按钮的半圆进度条 按住按钮进度条会动

UniApp 中制作围绕圆形按钮的半圆进度条并实现按住滚动效果，你可以按照以下步骤操作：

1. 首先，在uni-app的组件库或者自定义组件中，设计一个圆形的基本结构。这通常包括一个圆形视图（`<view class="circle-progress" :style="{ width: '50%', height: '50%' }">...</view>`），内嵌一个用于显示进度的扇形元素（如`<view class="progress-bar"></view>`）。

<template>
  <view class="container">
    <button @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd" class="circle-button">
      <view class="circle-progress">
        <view class="progress-bar" :style="{ width: percent + '%' }"></view>
      </view>
    </button>
  </view>
</template>

<style scoped>
.circle-progress {
  position: relative;
  border-radius: 50%;
}

.circle-button {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.progress-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transition: width 0.3s ease;
}
</style>

2. 在JavaScript部分处理事件，监听`touchstart`开始拖动、`touchmove`移动和`touchend`结束。计算百分比并更新进度条样式。

<script>
export default {
  data() {
    return {
      percent: 0,
      isDragging: false,
    };
  },
  methods: {
    handleStart(e) {
      this.isDragging = true;
      this.startPercent = parseInt((e.detail.touches[0].pageX - this.$refs.circleButton.getBoundingClientRect().left) / this.$refs.circleProgress.clientWidth * 100);
    },
    
    handleMove(e) {
      if (this.isDragging) {
        const currentPercent = parseInt((e.detail.changedTouches[0].pageX - this.$refs.circleButton.getBoundingClientRect().left) / this.$refs.circleProgress.clientWidth * 100);
        const diff = Math.min(Math.abs(this.startPercent - currentPercent), 100); // 限制在0到100之间
        this.percent = startPercent + diff;
      }
    },
    
    handleEnd(e) {
      this.isDragging = false;
      this.percent = 0; // 或者根据需要设置新的默认值
    },
  },
};
</script>

这样，当用户点击并保持按住圆形按钮时，进度条就会随着手指移动而改变。松开手后，进度条会回到初始状态或特定的停止位置。