基于Taro + React 实现微信小程序半圆滑块组件、半圆进度条、弧形进度条、半圆滑行轨道（附源码）

news2025/7/18 5:32:49

效果：

功能点：

1、四个档位

2、可点击加减切换档位

3、可以点击区域切换档位

4、可以滑动切换档位

目的：

给大家提供一些实现思路，找了一圈，一些文章基本不能直接用，错漏百出，代码还藏着掖着，希望可以帮到大家

代码

ts的写法风格

index.tsx     

import { View, ITouchEvent, BaseTouchEvent } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
import styles from './index.module.less'
import classNames from 'classnames'
import { debounce } from '~/utils/util'

enum ANGLES {
  ANGLES_135 = -135,
  ANGLES_90 = -90,
  ANGLES_45 = -45,
  ANGLES_0 = 0
}

enum MODE_VALUE {
  MODE_1 = 1,
  MODE_2 = 2,
  MODE_3 = 3,
  MODE_4 = 4
}

const HalfCircle = () => {
  const [state, setState] = useState({
    originAngle: ANGLES.ANGLES_135,
    isTouch: false,
    val: MODE_VALUE.MODE_1,
    originX: 0,
    originY: 0
  })

  /** 半圆的半径 */
  const RADIUS = 150
  /** 半径的一半 */
  const RADIUS_HALF = RADIUS / 2
  /** 4/3 圆的直径 */
  const RADIUS_THIRD = RADIUS_HALF * 3
  /** 直径 */
  const RADIUS_DOUBLE = RADIUS * 2
  /** 误差 */
  const DEVIATION = 25

  /** 是否开启点击振动 */
  const isVibrateShort = true

  const getAngle = () => {
    return {
      transform: `rotate(${state.originAngle}deg)`,
      transition: `all ${state.isTouch ? ' 0.2s' : ' 0.55s'}`
    }
  }

  /**
   * 根据坐标判断是否在半圆轨道上，半圆为RADIUS，误差为DEVIATION
   * @param pageX
   * @param pageY
   */
  const isInHalfCircleLine = (pageX: number, pageY: number, deviation?: number) => {
    const DEVIATION_VALUE = deviation || DEVIATION
    const squareSum = (pageX - RADIUS) * (pageX - RADIUS) + (pageY - RADIUS) * (pageY - RADIUS)
    const min = (RADIUS - DEVIATION_VALUE) * (RADIUS - DEVIATION_VALUE)
    const max = (RADIUS + DEVIATION_VALUE) * (RADIUS + DEVIATION_VALUE)
    return squareSum >= min && squareSum <= max
  }

  /** 根据做标点，获取档位 0 -> 4, -45 -> 3, -90 -> 2, -135 -> 1，从而获取旋转的角度 */
  const setGear = (pageX: number, pageY: number) => {
    let val = state.val
    let originAngle = state.originAngle
    if (isInHalfCircleLine(pageX, pageY)) {
      if (pageX > 0 && pageX <= RADIUS_HALF) {
        val = MODE_VALUE.MODE_1
        originAngle = ANGLES.ANGLES_135
      } else if (pageX > RADIUS_HALF && pageX <= RADIUS) {
        val = MODE_VALUE.MODE_2
        originAngle = ANGLES.ANGLES_90
      } else if (pageX > RADIUS && pageX <= RADIUS_THIRD) {
        val = MODE_VALUE.MODE_3
        originAngle = ANGLES.ANGLES_45
      } else {
        val = MODE_VALUE.MODE_4
        originAngle = ANGLES.ANGLES_0
      }
    }

    if (state.val === val) return
    setState((old) => {
      return {
        ...old,
        originAngle,
        val
      }
    })

    if (isVibrateShort) {
      setTimeout(() => {
        Taro.vibrateShort()
      }, 200)
    }
  }

  /**
   * 滑动比较细腻,根据x轴坐标，calcX判断是否前进还是后退
   * @param pageX
   * @param pageY
   */
  const setGearSibler = (pageX: number, pageY: number) => {
    let val = state.val
    let originAngle = state.originAngle
    const calcX = pageX - state.originX
    /** 把误差值增加，方便滑动 */
    if (isInHalfCircleLine(pageX, pageY, 50)) {
      if (pageX > 0 && pageX <= RADIUS_HALF) {
        if (calcX > 0) {
          /** 向前滑动，就前进一个档位 */
          val = MODE_VALUE.MODE_2
          originAngle = ANGLES.ANGLES_90
        } else {
          /** 向后滑动，就后退一个档位 */
          val = MODE_VALUE.MODE_1
          originAngle = ANGLES.ANGLES_135
        }
      } else if (pageX > RADIUS_HALF && pageX <= RADIUS) {
        if (calcX > 0) {
          val = MODE_VALUE.MODE_2
          originAngle = ANGLES.ANGLES_90
        } else {
          val = MODE_VALUE.MODE_1
          originAngle = ANGLES.ANGLES_135
        }
      } else if (pageX > RADIUS && pageX <= RADIUS_THIRD) {
        if (calcX > 0) {
          val = MODE_VALUE.MODE_3
          originAngle = ANGLES.ANGLES_45
        } else {
          val = MODE_VALUE.MODE_2
          originAngle = ANGLES.ANGLES_90
        }
      } else {
        if (calcX > 0) {
          val = MODE_VALUE.MODE_4
          originAngle = ANGLES.ANGLES_0
        } else {
          val = MODE_VALUE.MODE_3
          originAngle = ANGLES.ANGLES_45
        }
      }
    }
    setState((old) => {
      return {
        ...old,
        originAngle,
        val
      }
    })
  }

  /**
   * 获取正确的坐标点
   * @param pageX
   * @param pageY
   * @returns
   */
  const getRealXY = (
    pageX: number,
    pageY: number
  ): Promise<{
    realX: number
    realY: number
  }> => {
    return new Promise((resolve) => {
      Taro.createSelectorQuery()
        .select('#sliderBgcId')
        .boundingClientRect((rect) => {
          const { left, top } = rect
          /** 获取真实的做标点 */
          const realX = pageX - left
          const realY = pageY - top
          resolve({
            realX,
            realY
          })
        })
        .exec()
    })
  }

  const onTouchEnd = (event: BaseTouchEvent<any>) => {
    setState((old) => {
      return {
        ...old,
        isTouch: false
      }
    })
  }

  const onTouchMove = debounce(async (event: BaseTouchEvent<any>) => {
    const { pageX, pageY } = event.changedTouches[0]
    const { realX, realY } = await getRealXY(pageX, pageY)
    if (isInHalfCircleLine(realX, realY)) {
      setGearSibler(realX, realY)
    }
  }, 100)

  const onTouchStart = async (event: BaseTouchEvent<any>) => {
    const { pageX, pageY } = event.changedTouches[0]
    const { realX, realY } = await getRealXY(pageX, pageY)
    setState((old) => {
      return {
        ...old,
        originX: realX,
        originY: realY,
        isTouch: true
      }
    })
  }

  /** 点击设置档位 */
  const onHandleFirstTouch = async (event: BaseTouchEvent<any>) => {
    const { pageX, pageY } = event.changedTouches[0]
    const { realX, realY } = await getRealXY(pageX, pageY)
    if (isInHalfCircleLine(realX, realY)) {
      setGear(realX, realY)
    }
  }

  const lose = () => {
    if (state.isTouch) return
    if (state.val === 1) return Taro.showToast({
        title: '最低只能1挡',
        icon: 'error',
        duration: 2000
      })
    setState((old) => {
      return {
        ...old,
        originAngle: state.originAngle - 45,
        val: state.val - 1
      }
    })

    if (isVibrateShort) {
      Taro.vibrateShort()
    }
  }

  const add = () => {
    if (state.isTouch) return
    if (state.val === 4) return Taro.showToast({
        title: '最高只能4挡',
        icon: 'error',
        duration: 2000
      })
    setState((old) => {
      return {
        ...old,
        originAngle: state.originAngle + 45,
        val: state.val + 1
      }
    })

    if (isVibrateShort) {
      Taro.vibrateShort()
    }
  }

  return (
    <View
      className={styles.slider}
      // onTouchEnd={(event) => onTouchEnd(event)}
      // onTouchMove={(event) => onTouchMove(event)}
      // onTouchStart={(event) => onTouchStart(event)}
      onClick={onHandleFirstTouch}
    >
      <View className={styles.activeSliderSet}>
        <View className={styles.activeSlider} style={getAngle()} />
      </View>
      <View className={styles.origin} id="origin">
        <View className={styles.long} style={getAngle()}>
          <View
            className={styles.circle}
            onTouchMove={(event) => onTouchMove(event as BaseTouchEvent<any>)}
            onTouchStart={(event) => onTouchStart(event as BaseTouchEvent<any>)}
            onTouchEnd={(event) => onTouchEnd(event as BaseTouchEvent<any>)}
          />
        </View>
      </View>
      {/* 背景 */}
      <View className={styles.sliderBgc} id="sliderBgcId" />
      {/* 刻度 */}
      {/* <View className={styles.scaleBgc} /> */}
      <View className={styles.centerContent}>
        <View className={styles.centerText}>能量档位</View>
        <View className={styles.btn_air_bar}>
          <View className={classNames(styles.btn_air, styles.btn_air_left)} onClick={lose}>
            -
          </View>
          <View className={styles.val}>
            <View className="val_text">{state.val}</View>
          </View>
          <View className={classNames(styles.btn_air, styles.btn_air_right)} onClick={add}>
            +
          </View>
        </View>
      </View>
    </View>
  )
}

export default HalfCircle

index.module.less

@color-brand: #EBC795 ;
@borderColor:#706D6D;
@sliderWidth:10px;
@radius:150px;
@long: 150px;
@border-radius: @long;

.slider {
  position: relative;
  padding-bottom: @sliderWidth / 2;
  background-color: #000;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  // 背景色
  .sliderBgc {
    width: @long*2;
    height: @long;
    border: @sliderWidth solid;
    border-radius: @border-radius  @border-radius 0 0;
    border-color: @borderColor;
    border-bottom: none;
  }

  .scaleBgc {
    width: @long*2 + @sliderWidth *2;
    height: @long + @sliderWidth;
    position: absolute;
    // bottom: 0;
    // left: 0;
    border: @sliderWidth solid;
    border-radius: @border-radius + @sliderWidth  @border-radius + @sliderWidth 0 0;
    border-color: transparent;
    border-bottom: none;
    top: -10px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #000, #000), linear-gradient(90deg, #FFD1B2, #E49E6B);
  }

  // 激活色
  .activeSliderSet {
    position: absolute;
    width: (@long) *2;
    height: @long;
    // left: 0;
    // bottom: 0;
    z-index: 2;
    overflow: hidden;

    .activeSlider {
      bottom: 0;
      left: 0;
      width: @long*2;
      height: @long;
      border: @sliderWidth solid;
      border-color: @color-brand;
      // border-color: transparent !important;
      border-radius: @border-radius  @border-radius 0 0;
      border-bottom: none;
      transform: rotate(-100deg);
      transform-origin: @long @long;
      // background-clip: padding-box, border-box;
      // background-origin: padding-box, border-box;
      // background-image: linear-gradient(to right, #000, #000), linear-gradient(90deg, #FFD1B2, #E49E6B);
    }
  }

  .origin {
    width: 0;
    height: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    left: 50%;
    z-index: 11;
    transform: translateX(50%);

    .long {
      width: @long - (@sliderWidth / 2);
      height: 0;
      z-index: 9999;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: 0 0;
  
      .circle {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
        background-color: #000;
        border: #fff 4px solid;
        z-index: 999;
        padding: 5px;
      }
    }
  }


}

.centerContent {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  margin-bottom: 20px;

  .centerText {
    text-align: center;
    color: var(--q-light-color-text-secondary, var(--text-secondary, #8C8C8C));
    font-size: 10px;
    margin-bottom: 25px;
  }

  .btn_air_bar {
    display: flex;
    align-items: center;
  
    .btn_air {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: wheat;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn_air_left {
      background-color: #706D6D;
      color: white;
    }

    .btn_air_right {
      background-color: white;
      color: #706D6D;
    }
  
    .val {
      height: 26px;
      display: flex;
      align-items: center;
      margin: 0 30px;
      font-size: 26px;
      font-weight: 700;
    }
  }
}

防抖的工具函数debounce 的详细代码：

import { debounce } from '~/utils/util'

function debounce<T extends Function>(func: T, delay: number): T {
  let timeout
  return function (this: any, ...args: any[]): void {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  } as any;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1157724.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[极客大挑战 2019]Secret File 1

[极客大挑战 2019]Secret File 1

题目环境&#xff1a; 网页什么都没有&#xff0c;GET那里也没有任何参数和文件 F12查看隐藏文件发现隐藏文件点进去看看发现一个可点击按钮SECRET 好家伙&#xff0c;什么都没有 这里猜测还有隐藏文件目录扫描使用工具dirsearch命令&#xff1a;python dirsearch.py -u [http:…
阅读更多...
LLaMA-Adapter源码解析

LLaMA-Adapter源码解析

LLaMA-Adapter源码解析 伪代码 def transformer_block_with_llama_adapter(x, gating_factor, soft_prompt):residual xy zero_init_attention(soft_prompt, x) # llama-adapter: prepend prefixx self_attention(x)x x gating_factor * y # llama-adapter: apply zero_init…
阅读更多...
全网公开电商数据的采集重点

全网公开电商数据的采集重点

数据的采集是根据需求而定的&#xff0c;品牌会做数据采集的原因&#xff0c;一般与内部营销、渠道管控有关&#xff0c;如需要做价格管控时&#xff0c;需要先采集价格&#xff0c;这就需要对数据进行采集&#xff0c;包括价格、促销信息&#xff0c;又或者是需要做行业分析、…
阅读更多...
总感觉戴助听器耳朵又闷又堵怎么办？

总感觉戴助听器耳朵又闷又堵怎么办？

随着助听器技术的进步发展&#xff0c;这些问题都有了一定程度的改善。例如&#xff0c;现在的助听器变得越来越小巧&#xff0c;外形更加美观和隐蔽&#xff1b;各种降噪技术和验配技巧也提升了助听器的音质和清晰度。 但是&#xff0c;还有一个问题困扰着很多助听器用户&…
阅读更多...
缓存击穿只会逻辑过期 OR 互斥锁？深入思考 == 鹤立鸡群

缓存击穿只会逻辑过期 OR 互斥锁？深入思考 == 鹤立鸡群

网上但凡看得见的文章&#xff0c;大部分在说缓存穿透时都是无脑分布式锁 / 逻辑过期&#xff0c;分布式锁一点问题都没有么&#xff1f;逻辑过期一点问题都没有么&#xff1f;还能不能再进一步优化&#xff1f; 在聊聊缓存击穿的双重判定锁之前&#xff0c;我们将按照循循渐进…
阅读更多...
java基础之IO操作

java基础之IO操作

用户进程发起请求&#xff0c;内核接收到请求后&#xff0c;从I/O设备中获取数据到buffer中&#xff0c;再将buffer中的数据copy到用户进程的地址空间&#xff0c;该用户进程获取到数据后再响应客户端。 数据输入到buffer需要时间&#xff0c;从buffer复制数据至进程也需要时间…
阅读更多...
社区参展招募｜ 与新兴初创企业一起！

社区参展招募｜ 与新兴初创企业一起！

一般来说&#xff0c;创业公司的生存率较低&#xff0c;失败率较高。根据不同的数据来源&#xff0c;创业公司的失败率高达 80%-90%。据统计&#xff0c;在中国每年新注册的企业数量超过 100 万家&#xff0c;但能够存活到 5 年以上的企业不足 7%&#xff0c;10 年以上不足 2%。…
阅读更多...
路径复杂度(环形回路的复杂度计算)

路径复杂度(环形回路的复杂度计算)

路径复杂度 1、通用公式: (EF) - N12、非环形回路的复杂度计算公式为什么1&#xff1f;公式为什么(EF)-N&#xff1f; 3、类推到环形回路的复杂度演示区分下纯环形回路 和 不是纯粹的环形回路 3、特殊情况&#xff1a;自旋公式化理解&#xff1a;此时将B自旋回路看成一个环形回…
阅读更多...
混合编程 ATPCS规范及案例（汇编调用C、C调用汇编、内联汇编）

混合编程 ATPCS规范及案例（汇编调用C、C调用汇编、内联汇编）

1.混合编程的规范 2.汇编调用C 2.C调用汇编 3.内联汇编 例子&#xff1a;
阅读更多...
高速视觉筛选机PCIe实时运动控制卡XPCIE1028亮相深圳慕尼黑华南电子展

高速视觉筛选机PCIe实时运动控制卡XPCIE1028亮相深圳慕尼黑华南电子展

本次的深圳慕尼黑华南电子展正运动技术将携高速视觉筛选机PCIe实时运动控制卡XPCIE1028亮相。此外&#xff0c;我们还为您准备了的新互动模式&#xff0c;您将有机会赢得超值礼品&#xff01; 产品导读 正运动技术的PCI Express总线运动控制卡XPCIE1028&#xff0c;具备位置…
阅读更多...
二叉树初次的整体过程

二叉树初次的整体过程

1.计算二叉树节点的范围 2.计算用父亲下标找出儿子的下标&#xff0c;用儿子的下标找出父亲的下标方法 2.向下调整算法 void AdjustUp(HPDataType*a,int child) {int parent (child - 1) / 2;while (0 < child){if (a[child] < a[parent]){HPDataType* tem a[child];a[…
阅读更多...
Linux常用命令——chgrp命令

Linux常用命令——chgrp命令

在线Linux命令查询工具 chgrp 用来变更文件或目录的所属群组 补充说明 chgrp命令用来改变文件或目录所属的用户组。该命令用来改变指定文件所属的用户组。其中&#xff0c;组名可以是用户组的id&#xff0c;也可以是用户组的组名。文件名可以 是由空格分开的要改变属组的文…
阅读更多...
mpp解码详解

mpp解码详解

解码器数据流接口 一. decode_put_packet 输入码流的形式&#xff1a;分帧与不分帧 MPP 的输入都是没有封装信息的裸码流&#xff0c;裸码流输入有两种形式&#xff1a; 不分帧 这种方式是已经按帧分段的数据&#xff0c;即每一包输入给 decode_put_packet 函数的 MppPacket 数…
阅读更多...
PCIe 的 MSI 中断详解，寄存器级别的详细流程分析，完全搞懂硬件的工作流程

PCIe 的 MSI 中断详解，寄存器级别的详细流程分析，完全搞懂硬件的工作流程

PCIe 的 MSI 中断 前言 什么是 MSI 中断 (Message Signaled Interrupts) 概念与内容介绍待补充 正文 对 EP 的初始化 需要对 EP 的配置空间 MSI 相关功能的寄存器进行初始化&#xff0c;主要有两个寄存器 Message Address 和 Message Data。它们分别的含义是 EP 产生 MSI …
阅读更多...
关于JSON 字符串或对象互转

关于JSON 字符串或对象互转

目录 1、 识别不了空数组&#xff0c;只能打印出来{__ob__: Observer} 2、遇到把字符串解析为对象 1、 识别不了空数组&#xff0c;只能打印出来{__ob__: Observer} 遇到了这种&#xff0c;可以使用 "JSON.stringify(JSON.parse(JSON.stringify(obj))" 解析成空对象…
阅读更多...
B站数据质量保障体系建设与实践

B站数据质量保障体系建设与实践

本文将分享 B 站数据质量保障体系的建设和实践。文章将关注数仓和建模的相关方法论&#xff0c;讲解 B 站数仓平台团队在数仓建设和建模过程中所做的工作&#xff0c;并分享质量保障方面取得的成果。 一、背景目标 首先&#xff0c;分享一下 B 站数据质量保障的背景和目标。 …
阅读更多...
onnx 模型加载部署运行方式

onnx 模型加载部署运行方式

1.onnx文件加载方式在onnxruntime下是: env Ort::Env(OrtLoggingLevel::ORT_LOGGING_LEVEL_WARNING, "YOLOV8");sessionOptions Ort::SessionOptions();std::wstring w_modelPath charToWstring(mnnModelPath.c_str());session Ort::Session(env, w_modelPath.c_…
阅读更多...
输入日期是当年的第n天

输入日期是当年的第n天

从键盘输入正确日期&#xff0c;程序输出是当年的第n天。 (本笔记适合熟悉循环和列表的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff0c;不仅仅是基础那么…
阅读更多...
Springboot整合Minio实现文件上传和下载

Springboot整合Minio实现文件上传和下载

目录 1. Minio 1.1 Minio下载 2. Springboot和Minio实现文件存储 1. Minio Minio是一个灵活、高性能、开源的对象存储解决方案&#xff0c;适用于各种存储需求&#xff0c;并可以与云计算、容器化、大数据和应用程序集成。它为用户提供了自主控制和可扩展性&#xff0c;使其…
阅读更多...
Redis系统学习（高级篇）-Redis持久化-RDB方式

Redis系统学习（高级篇）-Redis持久化-RDB方式

目录 一、RDB是什么&#xff1f; 二、RDB的执行时机 三、RDB的其他命令 四、RDB的执行原理 五、RDB的优缺点 一、RDB是什么&#xff1f; RDB全称叫Redis Database Backup file&#xff08;Redis数据备份文件&#xff09; &#xff0c;也叫Redis数据快照&#xff0c;就是将…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023