Merge pull request #843 from thundersdata-frontend/rn-issue

fix: 修复slider滑动判断step的逻辑bug
thundersdata-frontend · Mar 22, 2024 · 37ec78e · 37ec78e
2 parents b4b17c5 + 9ea47b1
commit 37ec78e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/.changeset/itchy-humans-greet.md b/.changeset/itchy-humans-greet.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+fix: 修复slider滑动判断step的逻辑bug
diff --git a/packages/react-native/src/slider/index.tsx b/packages/react-native/src/slider/index.tsx
@@ -64,7 +64,7 @@ const Slider: FC<SliderProps> = props => {
   } = props;
   const KNOB_WIDTH = height;
   const sliderRange = width - KNOB_WIDTH;
-  const oneStepValue = sliderRange / max;
+  const oneStepValue = Math.floor(sliderRange / (max - min)) || 1;
 
   const { progressStyle, knobStyle, onGestureEvent, label } = useSlider({
     min,

diff --git a/packages/react-native/src/slider/useSlider.ts b/packages/react-native/src/slider/useSlider.ts
@@ -46,8 +46,18 @@ export default function useSlider({
       translateX.value = clamp(event.translationX + ctx.offsetX, min * oneStepValue, max * oneStepValue);
     },
     onEnd() {
+      // 判断当前停留的位置处于第几步
+      const currentStep = translateX.value / oneStepValue;
+      // 取余数进行判断，是否超过一半
+      const remainder = currentStep % 1;
+      if (remainder >= 0.5) {
+        translateX.value = Math.ceil(currentStep) * oneStepValue;
+      } else {
+        translateX.value = Math.floor(currentStep) * oneStepValue;
+      }
+
       if (onChange) {
-        runOnJS(onChange)(Number(label.value));
+        runOnJS(onChange)(translateX.value / oneStepValue);
       }
     },
   });