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

UniApp 中创建一个围绕圆形按钮的进度条，并支持按住按钮时进度条跟随移动，你可以按照以下步骤操作：

1. 首先，在组件库中选择合适的 UI 组件，比如 UniProgress 组件作为基础进度条，它通常是独立显示的。

2. 设计一个自定义的圆形按钮，可以使用 `uni-size-circle` 和 `uni-stroke-width` 等属性定制样式，让它看起来像一个圆形。

3. 将圆形按钮和进度条组合在一起，你可以将进度条包裹在按钮内，并通过 CSS 或者 JavaScript 动态绑定按钮事件，如 touchstart、touchmove 和 touchend 来控制进度条的位置变化。

<view class="circle-button">
  <view class="progress-bar">
    <uni-progress :percentage="progress" @change="handleProgressChange"></uni-progress>
  </view>
</view>

<style scoped>
.circle-button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  position: relative;
}

.progress-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<script setup>
import { ref } from 'vue';
const progress = ref(0);
const handleProgressChange = (e) => {
  // 根据触摸位置动态更新 progress 变量，例如计算偏移角度
};
</script>

当你按住圆形按钮时，可以通过监听 touchmove 事件获取手指移动的相对坐标，并相应地调整 `progress` 的值，进而改变进度条的位置。