devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Cpp五条 | 2024-02-26 20:45:35

赞

踩

小程序 圆形滑块

效果：

功能点：

1、四个档位

2、可点击加减切换档位

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

4、可以滑动切换档位

目的：

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

代码

ts的写法风格

index.tsx     

  1. import { View, ITouchEvent, BaseTouchEvent } from '@tarojs/components'
  2. import Taro from '@tarojs/taro'
  3. import { useState } from 'react'
  4. import styles from './index.module.less'
  5. import classNames from 'classnames'
  6. import { debounce } from '~/utils/util'
  7.  
  8. enum ANGLES {
  9.   ANGLES_135 = -135,
  10.   ANGLES_90 = -90,
  11.   ANGLES_45 = -45,
  12.   ANGLES_0 = 0
  13. }
  14.  
  15. enum MODE_VALUE {
  16.   MODE_1 = 1,
  17.   MODE_2 = 2,
  18.   MODE_3 = 3,
  19.   MODE_4 = 4
  20. }
  21.  
  22. const HalfCircle = () => {
  23.   const [state, setState] = useState({
  24.     originAngle: ANGLES.ANGLES_135,
  25.     isTouch: false,
  26.     val: MODE_VALUE.MODE_1,
  27.     originX: 0,
  28.     originY: 0
  29.   })
  30.  
  31.   /** 半圆的半径 */
  32.   const RADIUS = 150
  33.   /** 半径的一半 */
  34.   const RADIUS_HALF = RADIUS / 2
  35.   /** 4/3 圆的直径 */
  36.   const RADIUS_THIRD = RADIUS_HALF * 3
  37.   /** 直径 */
  38.   const RADIUS_DOUBLE = RADIUS * 2
  39.   /** 误差 */
  40.   const DEVIATION = 25
  41.  
  42.   /** 是否开启点击振动 */
  43.   const isVibrateShort = true
  44.  
  45.   const getAngle = () => {
  46.     return {
  47.       transform: `rotate(${state.originAngle}deg)`,
  48.       transition: `all ${state.isTouch ? ' 0.2s' : ' 0.55s'}`
  49.     }
  50.   }
  51.  
  52.   /**
  53.    * 根据坐标判断是否在半圆轨道上，半圆为RADIUS，误差为DEVIATION
  54.    * @param pageX
  55.    * @param pageY
  56.    */
  57.   const isInHalfCircleLine = (pageX: number, pageY: number, deviation?: number) => {
  58.     const DEVIATION_VALUE = deviation || DEVIATION
  59.     const squareSum = (pageX - RADIUS) * (pageX - RADIUS) + (pageY - RADIUS) * (pageY - RADIUS)
  60.     const min = (RADIUS - DEVIATION_VALUE) * (RADIUS - DEVIATION_VALUE)
  61.     const max = (RADIUS + DEVIATION_VALUE) * (RADIUS + DEVIATION_VALUE)
  62.     return squareSum >= min && squareSum <= max
  63.   }
  64.  
  65.   /** 根据做标点，获取档位 0 -> 4, -45 -> 3, -90 -> 2, -135 -> 1，从而获取旋转的角度 */
  66.   const setGear = (pageX: number, pageY: number) => {
  67.     let val = state.val
  68.     let originAngle = state.originAngle
  69.     if (isInHalfCircleLine(pageX, pageY)) {
  70.       if (pageX > 0 && pageX <= RADIUS_HALF) {
  71.         val = MODE_VALUE.MODE_1
  72.         originAngle = ANGLES.ANGLES_135
  73.       } else if (pageX > RADIUS_HALF && pageX <= RADIUS) {
  74.         val = MODE_VALUE.MODE_2
  75.         originAngle = ANGLES.ANGLES_90
  76.       } else if (pageX > RADIUS && pageX <= RADIUS_THIRD) {
  77.         val = MODE_VALUE.MODE_3
  78.         originAngle = ANGLES.ANGLES_45
  79.       } else {
  80.         val = MODE_VALUE.MODE_4
  81.         originAngle = ANGLES.ANGLES_0
  82.       }
  83.     }
  84.  
  85.     if (state.val === val) return
  86.     setState((old) => {
  87.       return {
  88.         ...old,
  89.         originAngle,
  90.         val
  91.       }
  92.     })
  93.  
  94.     if (isVibrateShort) {
  95.       setTimeout(() => {
  96.         Taro.vibrateShort()
  97.       }, 200)
  98.     }
  99.   }
  100.  
  101.   /**
  102.    * 滑动比较细腻,根据x轴坐标，calcX判断是否前进还是后退
  103.    * @param pageX
  104.    * @param pageY
  105.    */
  106.   const setGearSibler = (pageX: number, pageY: number) => {
  107.     let val = state.val
  108.     let originAngle = state.originAngle
  109.     const calcX = pageX - state.originX
  110.     /** 把误差值增加，方便滑动 */
  111.     if (isInHalfCircleLine(pageX, pageY, 50)) {
  112.       if (pageX > 0 && pageX <= RADIUS_HALF) {
  113.         if (calcX > 0) {
  114.           /** 向前滑动，就前进一个档位 */
  115.           val = MODE_VALUE.MODE_2
  116.           originAngle = ANGLES.ANGLES_90
  117.         } else {
  118.           /** 向后滑动，就后退一个档位 */
  119.           val = MODE_VALUE.MODE_1
  120.           originAngle = ANGLES.ANGLES_135
  121.         }
  122.       } else if (pageX > RADIUS_HALF && pageX <= RADIUS) {
  123.         if (calcX > 0) {
  124.           val = MODE_VALUE.MODE_2
  125.           originAngle = ANGLES.ANGLES_90
  126.         } else {
  127.           val = MODE_VALUE.MODE_1
  128.           originAngle = ANGLES.ANGLES_135
  129.         }
  130.       } else if (pageX > RADIUS && pageX <= RADIUS_THIRD) {
  131.         if (calcX > 0) {
  132.           val = MODE_VALUE.MODE_3
  133.           originAngle = ANGLES.ANGLES_45
  134.         } else {
  135.           val = MODE_VALUE.MODE_2
  136.           originAngle = ANGLES.ANGLES_90
  137.         }
  138.       } else {
  139.         if (calcX > 0) {
  140.           val = MODE_VALUE.MODE_4
  141.           originAngle = ANGLES.ANGLES_0
  142.         } else {
  143.           val = MODE_VALUE.MODE_3
  144.           originAngle = ANGLES.ANGLES_45
  145.         }
  146.       }
  147.     }
  148.     setState((old) => {
  149.       return {
  150.         ...old,
  151.         originAngle,
  152.         val
  153.       }
  154.     })
  155.   }
  156.  
  157.   /**
  158.    * 获取正确的坐标点
  159.    * @param pageX
  160.    * @param pageY
  161.    * @returns
  162.    */
  163.   const getRealXY = (
  164.     pageX: number,
  165.     pageY: number
  166.   ): Promise<{
  167.     realX: number
  168.     realY: number
  169.   }> => {
  170.     return new Promise((resolve) => {
  171.       Taro.createSelectorQuery()
  172.         .select('#sliderBgcId')
  173.         .boundingClientRect((rect) => {
  174.           const { left, top } = rect
  175.           /** 获取真实的做标点 */
  176.           const realX = pageX - left
  177.           const realY = pageY - top
  178.           resolve({
  179.             realX,
  180.             realY
  181.           })
  182.         })
  183.         .exec()
  184.     })
  185.   }
  186.  
  187.   const onTouchEnd = (event: BaseTouchEvent<any>) => {
  188.     setState((old) => {
  189.       return {
  190.         ...old,
  191.         isTouch: false
  192.       }
  193.     })
  194.   }
  195.  
  196.   const onTouchMove = debounce(async (event: BaseTouchEvent<any>) => {
  197.     const { pageX, pageY } = event.changedTouches[0]
  198.     const { realX, realY } = await getRealXY(pageX, pageY)
  199.     if (isInHalfCircleLine(realX, realY)) {
  200.       setGearSibler(realX, realY)
  201.     }
  202.   }, 100)
  203.  
  204.   const onTouchStart = async (event: BaseTouchEvent<any>) => {
  205.     const { pageX, pageY } = event.changedTouches[0]
  206.     const { realX, realY } = await getRealXY(pageX, pageY)
  207.     setState((old) => {
  208.       return {
  209.         ...old,
  210.         originX: realX,
  211.         originY: realY,
  212.         isTouch: true
  213.       }
  214.     })
  215.   }
  216.  
  217.   /** 点击设置档位 */
  218.   const onHandleFirstTouch = async (event: BaseTouchEvent<any>) => {
  219.     const { pageX, pageY } = event.changedTouches[0]
  220.     const { realX, realY } = await getRealXY(pageX, pageY)
  221.     if (isInHalfCircleLine(realX, realY)) {
  222.       setGear(realX, realY)
  223.     }
  224.   }
  225.  
  226.   const lose = () => {
  227.     if (state.isTouch) return
  228.     if (state.val === 1) return Taro.showToast({
  229.         title: '最低只能1挡',
  230.         icon: 'error',
  231.         duration: 2000
  232.       })
  233.     setState((old) => {
  234.       return {
  235.         ...old,
  236.         originAngle: state.originAngle - 45,
  237.         val: state.val - 1
  238.       }
  239.     })
  240.  
  241.     if (isVibrateShort) {
  242.       Taro.vibrateShort()
  243.     }
  244.   }
  245.  
  246.   const add = () => {
  247.     if (state.isTouch) return
  248.     if (state.val === 4) return Taro.showToast({
  249.         title: '最高只能4挡',
  250.         icon: 'error',
  251.         duration: 2000
  252.       })
  253.     setState((old) => {
  254.       return {
  255.         ...old,
  256.         originAngle: state.originAngle + 45,
  257.         val: state.val + 1
  258.       }
  259.     })
  260.  
  261.     if (isVibrateShort) {
  262.       Taro.vibrateShort()
  263.     }
  264.   }
  265.  
  266.   return (
  267.     <View
  268.       className={styles.slider}
  269.       // onTouchEnd={(event) => onTouchEnd(event)}
  270.       // onTouchMove={(event) => onTouchMove(event)}
  271.       // onTouchStart={(event) => onTouchStart(event)}
  272.       onClick={onHandleFirstTouch}
  273.     >
  274.       <View className={styles.activeSliderSet}>
  275.         <View className={styles.activeSlider} style={getAngle()} />
  276.       </View>
  277.       <View className={styles.origin} id="origin">
  278.         <View className={styles.long} style={getAngle()}>
  279.           <View
  280.             className={styles.circle}
  281.             onTouchMove={(event) => onTouchMove(event as BaseTouchEvent<any>)}
  282.             onTouchStart={(event) => onTouchStart(event as BaseTouchEvent<any>)}
  283.             onTouchEnd={(event) => onTouchEnd(event as BaseTouchEvent<any>)}
  284.           />
  285.         </View>
  286.       </View>
  287.       {/* 背景 */}
  288.       <View className={styles.sliderBgc} id="sliderBgcId" />
  289.       {/* 刻度 */}
  290.       {/* <View className={styles.scaleBgc} /> */}
  291.       <View className={styles.centerContent}>
  292.         <View className={styles.centerText}>能量档位</View>
  293.         <View className={styles.btn_air_bar}>
  294.           <View className={classNames(styles.btn_air, styles.btn_air_left)} onClick={lose}>
  295.             -
  296.           </View>
  297.           <View className={styles.val}>
  298.             <View className="val_text">{state.val}</View>
  299.           </View>
  300.           <View className={classNames(styles.btn_air, styles.btn_air_right)} onClick={add}>
  301.             +
  302.           </View>
  303.         </View>
  304.       </View>
  305.     </View>
  306.   )
  307. }
  308.  
  309. export default HalfCircle

index.module.less

  1. @color-brand: #EBC795 ;
  2. @borderColor:#706D6D;
  3. @sliderWidth:10px;
  4. @radius:150px;
  5. @long: 150px;
  6. @border-radius: @long;
  7.  
  8. .slider {
  9.   position: relative;
  10.   padding-bottom: @sliderWidth / 2;
  11.   background-color: #000;
  12.   width: 100vw;
  13.   display: flex;
  14.   justify-content: center;
  15.   align-items: center;
  16.  
  17.   // 背景色
  18.   .sliderBgc {
  19.     width: @long*2;
  20.     height: @long;
  21.     border: @sliderWidth solid;
  22.     border-radius: @border-radius  @border-radius 0 0;
  23.     border-color: @borderColor;
  24.     border-bottom: none;
  25.   }
  26.  
  27.   .scaleBgc {
  28.     width: @long*2 + @sliderWidth *2;
  29.     height: @long + @sliderWidth;
  30.     position: absolute;
  31.     // bottom: 0;
  32.     // left: 0;
  33.     border: @sliderWidth solid;
  34.     border-radius: @border-radius + @sliderWidth  @border-radius + @sliderWidth 0 0;
  35.     border-color: transparent;
  36.     border-bottom: none;
  37.     top: -10px;
  38.     background-clip: padding-box, border-box;
  39.     background-origin: padding-box, border-box;
  40.     background-image: linear-gradient(to right, #000, #000), linear-gradient(90deg, #FFD1B2, #E49E6B);
  41.   }
  42.  
  43.   // 激活色
  44.   .activeSliderSet {
  45.     position: absolute;
  46.     width: (@long) *2;
  47.     height: @long;
  48.     // left: 0;
  49.     // bottom: 0;
  50.     z-index: 2;
  51.     overflow: hidden;
  52.  
  53.     .activeSlider {
  54.       bottom: 0;
  55.       left: 0;
  56.       width: @long*2;
  57.       height: @long;
  58.       border: @sliderWidth solid;
  59.       border-color: @color-brand;
  60.       // border-color: transparent !important;
  61.       border-radius: @border-radius  @border-radius 0 0;
  62.       border-bottom: none;
  63.       transform: rotate(-100deg);
  64.       transform-origin: @long @long;
  65.       // background-clip: padding-box, border-box;
  66.       // background-origin: padding-box, border-box;
  67.       // background-image: linear-gradient(to right, #000, #000), linear-gradient(90deg, #FFD1B2, #E49E6B);
  68.     }
  69.   }
  70.  
  71.   .origin {
  72.     width: 0;
  73.     height: 0;
  74.     position: absolute;
  75.     background-color: rgba(0, 0, 0, 0.1);
  76.     bottom: 0;
  77.     left: 50%;
  78.     z-index: 11;
  79.     transform: translateX(50%);
  80.  
  81.     .long {
  82.       width: @long - (@sliderWidth / 2);
  83.       height: 0;
  84.       z-index: 9999;
  85.       position: absolute;
  86.       top: 0;
  87.       left: 0;
  88.       transform-origin: 0 0;
  89.   
  90.       .circle {
  91.         width: 16px;
  92.         height: 16px;
  93.         border-radius: 50%;
  94.         position: absolute;
  95.         top: 50%;
  96.         right: 0;
  97.         transform: translate(50%, -50%);
  98.         background-color: #000;
  99.         border: #fff 4px solid;
  100.         z-index: 999;
  101.         padding: 5px;
  102.       }
  103.     }
  104.   }
  105.  
  106.  
  107. }
  108.  
  109. .centerContent {
  110.   position: absolute;
  111.   bottom: 0;
  112.   left: 50%;
  113.   transform: translateX(-50%);
  114.   z-index: 99;
  115.   margin-bottom: 20px;
  116.  
  117.   .centerText {
  118.     text-align: center;
  119.     color: var(--q-light-color-text-secondary, var(--text-secondary, #8C8C8C));
  120.     font-size: 10px;
  121.     margin-bottom: 25px;
  122.   }
  123.  
  124.   .btn_air_bar {
  125.     display: flex;
  126.     align-items: center;
  127.   
  128.     .btn_air {
  129.       width: 30px;
  130.       height: 30px;
  131.       border-radius: 50%;
  132.       background-color: wheat;
  133.       font-size: 16px;
  134.       font-weight: 500;
  135.       display: flex;
  136.       align-items: center;
  137.       justify-content: center;
  138.     }
  139.  
  140.     .btn_air_left {
  141.       background-color: #706D6D;
  142.       color: white;
  143.     }
  144.  
  145.     .btn_air_right {
  146.       background-color: white;
  147.       color: #706D6D;
  148.     }
  149.   
  150.     .val {
  151.       height: 26px;
  152.       display: flex;
  153.       align-items: center;
  154.       margin: 0 30px;
  155.       font-size: 26px;
  156.       font-weight: 700;
  157.     }
  158.   }
  159. } 
  160.

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

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

  1. function debounce<T extends Function>(func: T, delay: number): T {
  2.   let timeout
  3.   return function (this: any, ...args: any[]): void {
  4.     const context = this;
  5.     clearTimeout(timeout);
  6.     timeout = setTimeout(() => {
  7.       func.apply(context, args);
  8.     }, delay);
  9.   } as any;
  10. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/146938
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号