components/MySlider/index.jsx

@@ -19,6 +19,7 @@ export default function MySlider({
   width = Dimensions.get("window").width - 44,
   onChange,
   onAfterChange = () => {},
+  handleFunc = () => {},
   defaultValue = 0,
   disabled = false,
   thumbSize = 25,
@@ -48,16 +49,16 @@ export default function MySlider({
     leftWatcher.current = PanResponder.create({
       // 建立监视器
       onStartShouldSetPanResponder: () => true,
-      // onPanResponderGrant: _onPanResponderGrantLeft, // 按下
+      onPanResponderGrant: _onPanResponderGrantLeft, // 按下
       onPanResponderMove: _onPanResponderMoveLeft, // 移动
-      // onPanResponderEnd: _onPanResponderEndLeft, // 结束
+      onPanResponderEnd: _onPanResponderEndLeft, // 结束
     });
     rightWatcher.current = PanResponder.create({
       // 建立监视器
       onStartShouldSetPanResponder: () => true,
-      // onPanResponderGrant: _onPanResponderGrantRight, // 按下
+      onPanResponderGrant: _onPanResponderGrantRight, // 按下
       onPanResponderMove: _onPanResponderMoveRight, // 移动
-      // onPanResponderEnd: _onPanResponderEndRight, // 结束
+      onPanResponderEnd: _onPanResponderEndRight, // 结束
     });
     setProcessWidth(width - thumbSize * 2);
   }, []);
@@ -78,27 +79,32 @@ export default function MySlider({
 
   // }, [leftProcess, rightProcess]);
   // 左侧滑块事件
-  // const _onPanResponderGrantLeft = (e, gestureState) => {
-  //   const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
-  //   _changeProcess(process, "left");
-  // };
+  const _onPanResponderGrantLeft = (e, gestureState) => {
+    // const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
+    // _changeProcess(process, "left");
+    handleFunc && handleFunc();
+  };
 
-  // const _onPanResponderEndLeft = (e, gestureState) => {
-  //   // if (onAfterChange) {
-  //   //   onAfterChange(gestureState.x0);
-  //   // }
-  // };
+  const _onPanResponderEndLeft = (e, gestureState) => {
+    handleFunc && handleFunc();
+  };
   const _onPanResponderMoveLeft = (e, gestureState) => {
     const process =
-      (gestureState.x0 - thumbSize / 2 + gestureState.dx) / processWidth;
+      (gestureState.x0 - thumbSize * 2 + gestureState.dx) / processWidth;
     _changeProcess(process, "left");
   };
 
   // 右侧滑块事件
-  // const _onPanResponderGrantRight = (e, gestureState) => {
-  //   const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
-  //   _changeProcess(process, "right");
-  // };
+  const _onPanResponderGrantRight = (e, gestureState) => {
+    // const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
+    // _changeProcess(process, "right");
+    handleFunc && handleFunc();
+  };
+  const _onPanResponderEndRight = (e, gestureState) => {
+    // const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
+    // _changeProcess(process, "right");
+    handleFunc && handleFunc();
+  };
 
   const _onPanResponderMoveRight = (e, gestureState) => {
     const process =
@@ -121,18 +127,21 @@ export default function MySlider({
           (stepValues.indexOf(currentRightValue.current) * step - lower_bound) /
           (upper_bound - lower_bound);
         if (newProcess < currentRightProcess) {
-          setLeftProcess(newProcess);
-          setStepNum((old) => old + 1);
-          onChange({
-            lower_bound:
-              stepValues[
-                Math.round(
-                  (newProcess * (upper_bound - lower_bound) + lower_bound) /
-                    step
-                )
-              ],
-            upper_bound: currentRightValue.current,
-          });
+          // console.log("currentRightProcess", newProcess, currentRightProcess);
+          const newLower =
+            stepValues[
+              Math.round(
+                (newProcess * (upper_bound - lower_bound) + lower_bound) / step
+              )
+            ];
+          if (newLower <= currentRightValue.current - 3) {
+            setLeftProcess(newProcess);
+            setStepNum((old) => old + 1);
+            onChange({
+              lower_bound: newLower,
+              upper_bound: currentRightValue.current,
+            });
+          }
         }
       } else {
         const currentLeftProcess =
@@ -140,18 +149,21 @@ export default function MySlider({
           (upper_bound - lower_bound);
 
         if (newProcess > currentLeftProcess) {
-          setRightProcess(newProcess);
-          setStepNum((old) => old - 1);
-          onChange({
-            lower_bound: currentLeftValue.current,
-            upper_bound:
-              stepValues[
-                Math.round(
-                  (newProcess * (upper_bound - lower_bound) + lower_bound) /
-                    step
-                )
-              ],
-          });
+          const newUpper =
+            stepValues[
+              Math.round(
+                (newProcess * (upper_bound - lower_bound) + lower_bound) / step
+              )
+            ];
+          if (newUpper >= currentLeftValue.current + 3) {
+            setRightProcess(newProcess);
+            setStepNum((old) => old - 1);
+            onChange({
+              lower_bound: currentLeftValue.current,
+              upper_bound: newUpper,
+            });
+          }
+
           // setStepNum(stepNum - 1);
         }
       }
@@ -244,62 +256,37 @@ export default function MySlider({
         cachePolicy="disk"
         // style={tailwind("w-full h-full rounded-lg overflow-hidden")}
         style={{
-          width: thumbSize * 3,
-          height: thumbSize * 3,
           position: "absolute",
-          left: leftProcess * processWidth - thumbSize,
+          left: leftProcess * processWidth,
           zIndex: 10,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          // borderWidth: 2,
+          width: thumbSize,
+          height: thumbSize,
+          borderRadius: 50,
+          backgroundColor: "#ff75c8",
+          borderColor: "#ffffff",
+          borderWidth: 2,
         }}
         {...leftWatcher.current?.panHandlers}
-      >
-        <View
-          transition={1000}
-          cachePolicy="disk"
-          // style={tailwind("w-full h-full rounded-lg overflow-hidden")}
-          style={{
-            width: thumbSize,
-            height: thumbSize,
-            borderRadius: 50,
-            backgroundColor: "#ff75c8",
-            borderColor: "#ffffff",
-            borderWidth: 2,
-          }}
-        />
-      </View>
+      ></View>
       {/* 右侧控件 */}
       <View
         transition={1000}
         cachePolicy="disk"
         // style={tailwind("w-full h-full rounded-lg overflow-hidden")}
         style={{
-          width: thumbSize * 3,
-          height: thumbSize * 3,
           position: "absolute",
-          left: rightProcess * processWidth - thumbSize,
+          left: rightProcess * processWidth,
           zIndex: 10,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          // borderWidth: 2,
+          width: thumbSize,
+          height: thumbSize,
+          backgroundColor: "#fff",
+          borderRadius: 50,
+          backgroundColor: "#ff75c8",
+          borderColor: "#ffffff",
+          borderWidth: 2,
         }}
         {...rightWatcher.current?.panHandlers}
-      >
-        <View
-          style={{
-            width: thumbSize,
-            height: thumbSize,
-            backgroundColor: "#fff",
-            borderRadius: 50,
-            backgroundColor: "#ff75c8",
-            borderColor: "#ffffff",
-            borderWidth: 2,
-          }}
-        ></View>
-      </View>
+      ></View>
 
       <View
         style={{

screeens/Search/index.jsx

@@ -41,6 +41,7 @@ export default function Search({ navigation, route }) {
   const [recommList, setRecommList] = useState([]);
   const [zones, setZones] = useState([]);
   const [isloading, setIsloading] = useState(false);
+  const [dontScroll, setDontScroll] = useState(true);
   const [isFilterVisible, setIsFilterVisible] = useState({
     comprehensive: false,
     zone_admission_price: false,
@@ -750,7 +751,7 @@ export default function Search({ navigation, route }) {
             }
             backdropStyle={{ backgroundColor: "#0000004d" }}
             scrollViewProps={{
-              scrollEnabled: false,
+              scrollEnabled: dontScroll,
               contentContainerStyle: {
                 // paddingTop: 20,
                 backgroundColor: "black",
@@ -801,6 +802,9 @@ export default function Search({ navigation, route }) {
                         lower_bound={item.lower_bound}
                         upper_bound={item.upper_bound}
                         itemKey={item.key}
+                        handleFunc={() => {
+                          setDontScroll((old) => !old);
+                        }}
                         leftValue={
                           item.key == "age"
                             ? filtersValue.age.lower_bound
@@ -990,6 +994,7 @@ export default function Search({ navigation, route }) {
               })
             }
             scrollViewProps={{
+              scrollEnabled: dontScroll,
               contentContainerStyle: {
                 // paddingTop: 20,
                 backgroundColor: "black",
@@ -1057,6 +1062,9 @@ export default function Search({ navigation, route }) {
                     }
                     stepValues={item.stepValues}
                     step={item.step}
+                    handleFunc={() => {
+                      setDontScroll((old) => !old);
+                    }}
                     hasInfinity={true}
                     itemKey={item.key}
                     onChange={(value) => {