uni-app 环形双向滑块选择睡眠时间

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app 环形双向滑块选择睡眠时间
图片

Harmonyos Next教程
1 回复

在处理uni-app中实现环形双向滑块选择睡眠时间的需求时，可以利用Canvas绘制环形进度条，并结合手势识别来实现滑块的拖动功能。以下是一个简化的代码示例，展示了如何实现这一功能。

1. 绘制环形进度条

首先，在页面的<template>部分添加一个Canvas组件：

<template>
  <view class="container">
    <canvas canvas-id="sleepCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

在<script>部分，使用Canvas API绘制环形进度条：

export default {
  data() {
    return {
      startAngle: -90, // 起始角度
      endAngle: 270, // 结束角度（表示睡眠时间范围）
      currentAngle: -90, // 当前滑块角度
    };
  },
  mounted() {
    this.drawCircle();
  },
  methods: {
    drawCircle() {
      const ctx = uni.createCanvasContext('sleepCanvas');
      const width = 300;
      const radius = 100;
      const centerX = width / 2;
      const centerY = width / 2;

      // 绘制背景圆环
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.setFillStyle('#e0e0e0');
      ctx.fill();
      ctx.closePath();

      // 绘制进度圆环
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, -Math.PI / 2, this.endAngle * Math.PI / 180 - Math.PI / 2);
      ctx.setLineWidth(20);
      ctx.setStrokeStyle('#4caf50');
      ctx.stroke();
      ctx.closePath();

      // 绘制滑块
      ctx.beginPath();
      ctx.arc(centerX + radius * Math.cos((this.currentAngle + 90) * Math.PI / 180) - 10,
        centerY - radius * Math.sin((this.currentAngle + 90) * Math.PI / 180) - 10, 20, 0, 2 * Math.PI);
      ctx.setFillStyle('#4caf50');
      ctx.fill();
      ctx.closePath();

      ctx.draw();
    },
    // 其他方法如手势处理等...
  },
};

2. 手势处理

为了实现滑块的拖动，需要在<script>部分添加手势监听事件，如touchstart、touchmove和touchend。这些事件可以用来更新currentAngle，并重新绘制Canvas。

由于篇幅限制，这里仅给出大致思路：

  • 在mounted生命周期钩子中，使用uni.onTouchStart、uni.onTouchMove和uni.onTouchEnd来监听手势。
  • 在手势处理函数中，根据触摸点的位置计算新的currentAngle。
  • 调用this.drawCircle()方法重新绘制Canvas。

注意，实际开发中可能需要处理更多的细节，比如边界检查、滑动平滑性等。上述代码是一个基础示例，展示了如何使用Canvas和手势识别来实现环形双向滑块选择睡眠时间的基本功能。

回到顶部