diff --git a/components/MySlider/index.jsx b/components/MySlider/index.jsx
index 03699cd..07e5e30 100644
--- a/components/MySlider/index.jsx
+++ b/components/MySlider/index.jsx
@@ -48,16 +48,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,87 +78,81 @@ 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");
+ // };
- const _onPanResponderEndLeft = (e, gestureState) => {
- if (onAfterChange) {
- onAfterChange(gestureState.x0);
- }
- };
+ // const _onPanResponderEndLeft = (e, gestureState) => {
+ // // if (onAfterChange) {
+ // // onAfterChange(gestureState.x0);
+ // // }
+ // };
const _onPanResponderMoveLeft = (e, gestureState) => {
const process =
- (gestureState.x0 - 40 - thumbSize / 2 + gestureState.dx) / processWidth;
+ (gestureState.x0 - 30 - 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");
+ // };
- const _onPanResponderEndRight = (e, gestureState) => {
- if (onAfterChange) {
- onAfterChange(gestureState.x0);
- }
- };
const _onPanResponderMoveRight = (e, gestureState) => {
const process =
- (gestureState.x0 - 40 - thumbSize / 2 + gestureState.dx) / processWidth;
+ (gestureState.x0 + 30 - thumbSize / 2 + gestureState.dx) / processWidth;
_changeProcess(process, "right");
};
const _changeProcess = (changeProcess, direction) => {
// 判断滑动开关
if (disabled) return;
- if (changeProcess >= 0 && changeProcess <= 1) {
- // 按步长比例变化刻度
- const v = changeProcess * (upper_bound - lower_bound);
- const newValue = Math.round(v / step) * step;
- const newProcess = Math.round(newValue) / (upper_bound - lower_bound);
- setStepNum(stepNum + 1);
- if (process !== newProcess) {
- const currentRightProcess =
- (stepValues.indexOf(currentRightValue.current) * step - lower_bound) /
+ // 按步长比例变化刻度
+ changeProcess =
+ changeProcess > 1 ? 1 : changeProcess < 0 ? 0 : changeProcess;
+ const v = changeProcess * (upper_bound - lower_bound);
+ const newValue = Math.round(v / step) * step;
+ const newProcess = Math.round(newValue) / (upper_bound - lower_bound);
+ setStepNum(stepNum + 1);
+ if (process !== newProcess) {
+ const currentRightProcess =
+ (stepValues.indexOf(currentRightValue.current) * step - lower_bound) /
+ (upper_bound - lower_bound);
+ if (direction == "left") {
+ 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,
+ });
+ }
+ } else {
+ const currentLeftProcess =
+ (stepValues.indexOf(currentLeftValue.current) * step - lower_bound) /
(upper_bound - lower_bound);
- if (direction == "left") {
- 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,
- });
- }
- } else {
- const currentLeftProcess =
- (stepValues.indexOf(currentLeftValue.current) * step -
- lower_bound) /
- (upper_bound - lower_bound);
- if (newProcess > currentLeftProcess) {
- // rightProcess.current = newProcess;
- setRightProcess(newProcess);
- setStepNum((old) => old - 1);
- onChange({
- lower_bound: currentLeftValue.current,
- upper_bound:
- stepValues[
- Math.round(
- (newProcess * (upper_bound - lower_bound) + lower_bound) /
- step
- )
- ],
- });
- // setStepNum(stepNum - 1);
- }
+
+ 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
+ )
+ ],
+ });
+ // setStepNum(stepNum - 1);
}
}
}
@@ -180,7 +174,7 @@ export default function MySlider({
justifyContent: "center",
alignItems: "center",
marginBottom: 36,
- marginTop: 12,
+ marginTop: 24,
}}
>
@@ -293,7 +287,6 @@ export default function MySlider({
alignItems: "center",
// borderWidth: 2,
}}
- {...rightWatcher.current?.panHandlers}
>
@@ -312,8 +306,8 @@ export default function MySlider({
style={{
...tailwind("flex flex-row justify-between items-center"),
position: "absolute",
- top: -46,
- right: 12,
+ top: -48,
+ right: 24,
}}
>
- {hasInfinity && leftProcess == 1
+ {/* {hasInfinity && leftProcess == 1
? ">" + upper_bound
: stepValues[
Math.round(
(leftProcess * (upper_bound - lower_bound) + lower_bound) /
step
)
- ]}
+ ]} */}
+ {leftValue}
- {hasInfinity && rightProcess == 1
+ {/* {hasInfinity && Math.floor(rightProcess) == 1
? ">" + upper_bound
: stepValues[
Math.round(
(rightProcess * (upper_bound - lower_bound) + lower_bound) /
step
)
- ]}
+ ]} */}
+ {rightValue}
{item.name}
{item.type == "slider" ? (
- {
- if (item.key == "age") {
- setFiltersValue((old) => ({ ...old, age: value }));
- } else if (item.key == "fans") {
- setFiltersValue((old) => ({ ...old, fans: value }));
- } else if (item.key == "height") {
- setFiltersValue((old) => ({ ...old, height: value }));
- } else if (item.key == "weight") {
- setFiltersValue((old) => ({ ...old, weight: value }));
+
+
+ rightValue={
+ item.key == "age"
+ ? filtersValue.age.upper_bound
+ : item.key == "height"
+ ? filtersValue.height.upper_bound
+ : item.key == "weight"
+ ? filtersValue.weight.upper_bound
+ : filtersValue.fans.upper_bound
+ }
+ step={item.step}
+ hasInfinity={item.key == "fans"}
+ stepValues={item.stepValues}
+ onChange={(value) => {
+ if (item.key == "age") {
+ setFiltersValue((old) => ({ ...old, age: value }));
+ } else if (item.key == "fans") {
+ setFiltersValue((old) => ({ ...old, fans: value }));
+ } else if (item.key == "height") {
+ setFiltersValue((old) => ({
+ ...old,
+ height: value,
+ }));
+ } else if (item.key == "weight") {
+ setFiltersValue((old) => ({
+ ...old,
+ weight: value,
+ }));
+ }
+ }}
+ maximumTrackTintColor="#382435"
+ minimumTrackTintColor="#ff75c8"
+ processHeight={5}
+ unit={item.unit}
+ thumbImage={require("../../assets/icon/32DP/edit.png")}
+ />
+
) : item.type == "checkbox" ? (