update

src/components/input/Slider.tsx

@@ -1,14 +1,15 @@
 import { View, Text } from '@tarojs/components'
 import './Slider.scss'
 import { ColorType } from '@/context/themes/color'
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { rpxToPx } from '@/utils/tools';
 
-export default function (props: { onChanged?: Function,value?:number }) {
+var currentValue = 0;
+export default function (props: { onChanged?: Function, value?: number, edit?: boolean }) {
 
     const [brightness, setBrightness] = useState(0);
     const [isSliding, setIsSliding] = useState(false);
-    const [value, setValue] = useState(props.value?props.value:0)
+    const [value, setValue] = useState(props.value ? props.value : 0)
     const [startX, setStartX] = useState(0);
 
     const handleTouchStart = (event) => {
@@ -31,6 +32,7 @@ export default function (props: { onChanged?: Function,value?:number }) {
             brightnessValue = Math.round(brightnessValue)
             setStartX(touchX)
             setBrightness(brightnessValue);
+            currentValue = brightnessValue;
 
             setValue(calculateNumber(brightnessValue))
         }
@@ -38,10 +40,30 @@ export default function (props: { onChanged?: Function,value?:number }) {
 
     const handleTouchEnd = () => {
         setIsSliding(false);
-        if (props.onChanged){
+        if (props.onChanged) {
             props.onChanged(value);
         }
-        
+        if (props.edit) {
+            console.log('mind')
+            if (startX != 0) {
+                // 松手后，滑块动画移动到最左边
+                const animationId = requestAnimationFrame(moveToStart);
+                return () => cancelAnimationFrame(animationId);
+            }
+        }
+    };
+
+    const moveToStart = () => {
+        const newPosition = Math.max(currentValue - 3, 0);
+        currentValue = newPosition
+        setBrightness(newPosition)
+        if (newPosition > 0) {
+            console.log(newPosition)
+            requestAnimationFrame(moveToStart);
+        } else {
+            setStartX(0);
+            setBrightness(0)
+        }
     };
 
     function calculateOpacity(number) {

src/features/food/FoodConsole.tsx

@@ -237,7 +237,7 @@ export default function Component(props: { addItem: Function, firstItem: any })
                     {
                         modeOn && <View style={{ height: rpxToPx(60) }} />
                     }
-                    {modeOn && <Slider />}
+                    {modeOn && <Slider edit={true}/>}
                 </View>
             </View>
         }