修复滑块边界问题
This commit is contained in:
al
parent
f0ea1ec904
commit
87d32326a9
|
|
@ -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,
|
||||
}}
|
||||
>
|
||||
<View style={{ width: "100%", position: "relative" }}>
|
||||
|
|
@ -293,7 +287,6 @@ export default function MySlider({
|
|||
alignItems: "center",
|
||||
// borderWidth: 2,
|
||||
}}
|
||||
{...rightWatcher.current?.panHandlers}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
|
|
@ -305,6 +298,7 @@ export default function MySlider({
|
|||
borderColor: "#ffffff",
|
||||
borderWidth: 2,
|
||||
}}
|
||||
{...rightWatcher.current?.panHandlers}
|
||||
></View>
|
||||
</View>
|
||||
|
||||
|
|
@ -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,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
|
|
@ -323,14 +317,15 @@ export default function MySlider({
|
|||
color: "#ff75c8",
|
||||
}}
|
||||
>
|
||||
{hasInfinity && leftProcess == 1
|
||||
{/* {hasInfinity && leftProcess == 1
|
||||
? ">" + upper_bound
|
||||
: stepValues[
|
||||
Math.round(
|
||||
(leftProcess * (upper_bound - lower_bound) + lower_bound) /
|
||||
step
|
||||
)
|
||||
]}
|
||||
]} */}
|
||||
{leftValue}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
@ -348,14 +343,15 @@ export default function MySlider({
|
|||
color: "#ff75c8",
|
||||
}}
|
||||
>
|
||||
{hasInfinity && rightProcess == 1
|
||||
{/* {hasInfinity && Math.floor(rightProcess) == 1
|
||||
? ">" + upper_bound
|
||||
: stepValues[
|
||||
Math.round(
|
||||
(rightProcess * (upper_bound - lower_bound) + lower_bound) /
|
||||
step
|
||||
)
|
||||
]}
|
||||
]} */}
|
||||
{rightValue}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -750,6 +750,7 @@ export default function Search({ navigation, route }) {
|
|||
}
|
||||
backdropStyle={{ backgroundColor: "#0000004d" }}
|
||||
scrollViewProps={{
|
||||
scrollEnabled: false,
|
||||
contentContainerStyle: {
|
||||
// paddingTop: 20,
|
||||
backgroundColor: "black",
|
||||
|
|
@ -775,68 +776,76 @@ export default function Search({ navigation, route }) {
|
|||
<View
|
||||
key={index}
|
||||
style={{
|
||||
...tailwind(`p-4 rounded-xl`),
|
||||
...tailwind(`p-4 rounded-xl `),
|
||||
backgroundColor: "#13121f",
|
||||
margin: 18,
|
||||
marginBottom: 6,
|
||||
marginBottom: 3,
|
||||
flexDirection: item.type !== "slider" ? "row" : "col",
|
||||
justifyContent: "space-between",
|
||||
// alignItems: "center",
|
||||
alignItems: item.type == "slider" ? "flex-start" : "center",
|
||||
// paddingBottom: 50,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
...tailwind("text-white font-medium"),
|
||||
marginVertical: 6,
|
||||
// marginVertical: 6,
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</Text>
|
||||
{item.type == "slider" ? (
|
||||
<MySlider
|
||||
height={40}
|
||||
lower_bound={item.lower_bound}
|
||||
upper_bound={item.upper_bound}
|
||||
itemKey={item.key}
|
||||
leftValue={
|
||||
item.key == "age"
|
||||
? filtersValue.age.lower_bound
|
||||
: item.key == "height"
|
||||
? filtersValue.height.lower_bound
|
||||
: item.key == "weight"
|
||||
? filtersValue.weight.lower_bound
|
||||
: filtersValue.fans.lower_bound
|
||||
}
|
||||
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 }));
|
||||
<View style={{ paddingVertical: 6 }}>
|
||||
<MySlider
|
||||
height={40}
|
||||
lower_bound={item.lower_bound}
|
||||
upper_bound={item.upper_bound}
|
||||
itemKey={item.key}
|
||||
leftValue={
|
||||
item.key == "age"
|
||||
? filtersValue.age.lower_bound
|
||||
: item.key == "height"
|
||||
? filtersValue.height.lower_bound
|
||||
: item.key == "weight"
|
||||
? filtersValue.weight.lower_bound
|
||||
: filtersValue.fans.lower_bound
|
||||
}
|
||||
}}
|
||||
maximumTrackTintColor="#382435"
|
||||
minimumTrackTintColor="#ff75c8"
|
||||
processHeight={5}
|
||||
unit={item.unit}
|
||||
thumbImage={require("../../assets/icon/32DP/edit.png")}
|
||||
/>
|
||||
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")}
|
||||
/>
|
||||
</View>
|
||||
) : item.type == "checkbox" ? (
|
||||
<CheckBox
|
||||
checked={filtersValue.is_active_within_a_week}
|
||||
|
|
@ -914,7 +923,7 @@ export default function Search({ navigation, route }) {
|
|||
{isMember == 1 && (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
...tailwind("text-white px-4 py-2 rounded-xl"),
|
||||
...tailwind("text-white px-4 py-2 rounded-xl mr-2"),
|
||||
marginVertical: 6,
|
||||
backgroundColor: "#ffffff1a",
|
||||
width: 120,
|
||||
|
|
@ -1107,7 +1116,7 @@ export default function Search({ navigation, route }) {
|
|||
{isMember == 1 && (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
...tailwind("text-white px-4 py-2 rounded-xl"),
|
||||
...tailwind("text-white px-4 py-2 rounded-xl mr-2"),
|
||||
marginVertical: 6,
|
||||
backgroundColor: "#ffffff1a",
|
||||
width: 120,
|
||||
|
|
|
|||
Loading…
Reference in New Issue