wishpal_ironfan
/
tiefen_space_app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复滑块边界问题

This commit is contained in:
al 2024-08-23 20:52:07 +08:00
parent f0ea1ec904
commit 87d32326a9
2 changed files with 130 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
components/MySlider/index.jsx
View File

@ -48,16 +48,16 @@ export default function MySlider({
leftWatcher.current = PanResponder.create({ leftWatcher.current = PanResponder.create({
// 建立监视器 // 建立监视器
onStartShouldSetPanResponder: () => true, onStartShouldSetPanResponder: () => true,
onPanResponderGrant: _onPanResponderGrantLeft, // 按下 // onPanResponderGrant: _onPanResponderGrantLeft, // 按下
onPanResponderMove: _onPanResponderMoveLeft, // 移动 onPanResponderMove: _onPanResponderMoveLeft, // 移动
onPanResponderEnd: _onPanResponderEndLeft, // 结束 // onPanResponderEnd: _onPanResponderEndLeft, // 结束
}); });
rightWatcher.current = PanResponder.create({ rightWatcher.current = PanResponder.create({
// 建立监视器 // 建立监视器
onStartShouldSetPanResponder: () => true, onStartShouldSetPanResponder: () => true,
onPanResponderGrant: _onPanResponderGrantRight, // 按下 // onPanResponderGrant: _onPanResponderGrantRight, // 按下
onPanResponderMove: _onPanResponderMoveRight, // 移动 onPanResponderMove: _onPanResponderMoveRight, // 移动
onPanResponderEnd: _onPanResponderEndRight, // 结束 // onPanResponderEnd: _onPanResponderEndRight, // 结束
}); });
setProcessWidth(width - thumbSize * 2); setProcessWidth(width - thumbSize * 2);
}, []); }, []);
@ -78,87 +78,81 @@ export default function MySlider({
// }, [leftProcess, rightProcess]); // }, [leftProcess, rightProcess]);
// 左侧滑块事件 // 左侧滑块事件
const _onPanResponderGrantLeft = (e, gestureState) => { // const _onPanResponderGrantLeft = (e, gestureState) => {
const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth; // const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
_changeProcess(process, "left"); // _changeProcess(process, "left");
}; // };
const _onPanResponderEndLeft = (e, gestureState) => { // const _onPanResponderEndLeft = (e, gestureState) => {
if (onAfterChange) { // // if (onAfterChange) {
onAfterChange(gestureState.x0); // // onAfterChange(gestureState.x0);
} // // }
}; // };
const _onPanResponderMoveLeft = (e, gestureState) => { const _onPanResponderMoveLeft = (e, gestureState) => {
const process = const process =
(gestureState.x0 - 40 - thumbSize / 2 + gestureState.dx) / processWidth; (gestureState.x0 - 30 - thumbSize / 2 + gestureState.dx) / processWidth;
_changeProcess(process, "left"); _changeProcess(process, "left");
}; };
// 右侧滑块事件 // 右侧滑块事件
const _onPanResponderGrantRight = (e, gestureState) => { // const _onPanResponderGrantRight = (e, gestureState) => {
const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth; // const process = (gestureState.x0 - 40 - thumbSize / 2) / processWidth;
_changeProcess(process, "right"); // _changeProcess(process, "right");
}; // };
const _onPanResponderEndRight = (e, gestureState) => {
if (onAfterChange) {
onAfterChange(gestureState.x0);
}
};
const _onPanResponderMoveRight = (e, gestureState) => { const _onPanResponderMoveRight = (e, gestureState) => {
const process = const process =
(gestureState.x0 - 40 - thumbSize / 2 + gestureState.dx) / processWidth; (gestureState.x0 + 30 - thumbSize / 2 + gestureState.dx) / processWidth;
_changeProcess(process, "right"); _changeProcess(process, "right");
}; };
const _changeProcess = (changeProcess, direction) => { const _changeProcess = (changeProcess, direction) => {
// 判断滑动开关 // 判断滑动开关
if (disabled) return; if (disabled) return;
if (changeProcess >= 0 && changeProcess <= 1) { // 按步长比例变化刻度
// 按步长比例变化刻度 changeProcess =
const v = changeProcess * (upper_bound - lower_bound); changeProcess > 1 ? 1 : changeProcess < 0 ? 0 : changeProcess;
const newValue = Math.round(v / step) * step; const v = changeProcess * (upper_bound - lower_bound);
const newProcess = Math.round(newValue) / (upper_bound - lower_bound); const newValue = Math.round(v / step) * step;
setStepNum(stepNum + 1); const newProcess = Math.round(newValue) / (upper_bound - lower_bound);
if (process !== newProcess) { setStepNum(stepNum + 1);
const currentRightProcess = if (process !== newProcess) {
(stepValues.indexOf(currentRightValue.current) * step - lower_bound) / 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); (upper_bound - lower_bound);
if (direction == "left") {
if (newProcess < currentRightProcess) { if (newProcess > currentLeftProcess) {
setLeftProcess(newProcess); setRightProcess(newProcess);
setStepNum((old) => old + 1); setStepNum((old) => old - 1);
onChange({ onChange({
lower_bound: lower_bound: currentLeftValue.current,
stepValues[ upper_bound:
Math.round( stepValues[
(newProcess * (upper_bound - lower_bound) + lower_bound) / Math.round(
step (newProcess * (upper_bound - lower_bound) + lower_bound) /
) step
], )
upper_bound: currentRightValue.current, ],
}); });
} // setStepNum(stepNum - 1);
} 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);
}
} }
} }
} }
@ -180,7 +174,7 @@ export default function MySlider({
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
marginBottom: 36, marginBottom: 36,
marginTop: 12, marginTop: 24,
}} }}
> >
<View style={{ width: "100%", position: "relative" }}> <View style={{ width: "100%", position: "relative" }}>
@ -293,7 +287,6 @@ export default function MySlider({
alignItems: "center", alignItems: "center",
// borderWidth: 2, // borderWidth: 2,
}} }}
{...rightWatcher.current?.panHandlers}
> >
<View <View
style={{ style={{
@ -305,6 +298,7 @@ export default function MySlider({
borderColor: "#ffffff", borderColor: "#ffffff",
borderWidth: 2, borderWidth: 2,
}} }}
{...rightWatcher.current?.panHandlers}
></View> ></View>
</View> </View>
@ -312,8 +306,8 @@ export default function MySlider({
style={{ style={{
...tailwind("flex flex-row justify-between items-center"), ...tailwind("flex flex-row justify-between items-center"),
position: "absolute", position: "absolute",
top: -46, top: -48,
right: 12, right: 24,
}} }}
> >
<Text <Text
@ -323,14 +317,15 @@ export default function MySlider({
color: "#ff75c8", color: "#ff75c8",
}} }}
> >
{hasInfinity && leftProcess == 1 {/* {hasInfinity && leftProcess == 1
? ">" + upper_bound ? ">" + upper_bound
: stepValues[ : stepValues[
Math.round( Math.round(
(leftProcess * (upper_bound - lower_bound) + lower_bound) / (leftProcess * (upper_bound - lower_bound) + lower_bound) /
step step
) )
]} ]} */}
{leftValue}
</Text> </Text>
<Text <Text
style={{ style={{
@ -348,14 +343,15 @@ export default function MySlider({
color: "#ff75c8", color: "#ff75c8",
}} }}
> >
{hasInfinity && rightProcess == 1 {/* {hasInfinity && Math.floor(rightProcess) == 1
? ">" + upper_bound ? ">" + upper_bound
: stepValues[ : stepValues[
Math.round( Math.round(
(rightProcess * (upper_bound - lower_bound) + lower_bound) / (rightProcess * (upper_bound - lower_bound) + lower_bound) /
step step
) )
]} ]} */}
{rightValue}
</Text> </Text>
<Text <Text
style={{ style={{

105
screeens/Search/index.jsx
View File

@ -750,6 +750,7 @@ export default function Search({ navigation, route }) {
} }
backdropStyle={{ backgroundColor: "#0000004d" }} backdropStyle={{ backgroundColor: "#0000004d" }}
scrollViewProps={{ scrollViewProps={{
scrollEnabled: false,
contentContainerStyle: { contentContainerStyle: {
// paddingTop: 20, // paddingTop: 20,
backgroundColor: "black", backgroundColor: "black",
@ -775,68 +776,76 @@ export default function Search({ navigation, route }) {
<View <View
key={index} key={index}
style={{ style={{
...tailwind(`p-4 rounded-xl`), ...tailwind(`p-4 rounded-xl `),
backgroundColor: "#13121f", backgroundColor: "#13121f",
margin: 18, margin: 18,
marginBottom: 6, marginBottom: 3,
flexDirection: item.type !== "slider" ? "row" : "col", flexDirection: item.type !== "slider" ? "row" : "col",
justifyContent: "space-between", justifyContent: "space-between",
// alignItems: "center", alignItems: item.type == "slider" ? "flex-start" : "center",
// paddingBottom: 50, // paddingBottom: 50,
}} }}
> >
<Text <Text
style={{ style={{
...tailwind("text-white font-medium"), ...tailwind("text-white font-medium"),
marginVertical: 6, // marginVertical: 6,
}} }}
> >
{item.name} {item.name}
</Text> </Text>
{item.type == "slider" ? ( {item.type == "slider" ? (
<MySlider <View style={{ paddingVertical: 6 }}>
height={40} <MySlider
lower_bound={item.lower_bound} height={40}
upper_bound={item.upper_bound} lower_bound={item.lower_bound}
itemKey={item.key} upper_bound={item.upper_bound}
leftValue={ itemKey={item.key}
item.key == "age" leftValue={
? filtersValue.age.lower_bound item.key == "age"
: item.key == "height" ? filtersValue.age.lower_bound
? filtersValue.height.lower_bound : item.key == "height"
: item.key == "weight" ? filtersValue.height.lower_bound
? filtersValue.weight.lower_bound : item.key == "weight"
: filtersValue.fans.lower_bound ? 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 }));
} }
}} rightValue={
maximumTrackTintColor="#382435" item.key == "age"
minimumTrackTintColor="#ff75c8" ? filtersValue.age.upper_bound
processHeight={5} : item.key == "height"
unit={item.unit} ? filtersValue.height.upper_bound
thumbImage={require("../../assets/icon/32DP/edit.png")} : 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" ? ( ) : item.type == "checkbox" ? (
<CheckBox <CheckBox
checked={filtersValue.is_active_within_a_week} checked={filtersValue.is_active_within_a_week}
@ -914,7 +923,7 @@ export default function Search({ navigation, route }) {
{isMember == 1 && ( {isMember == 1 && (
<TouchableOpacity <TouchableOpacity
style={{ style={{
...tailwind("text-white px-4 py-2 rounded-xl"), ...tailwind("text-white px-4 py-2 rounded-xl mr-2"),
marginVertical: 6, marginVertical: 6,
backgroundColor: "#ffffff1a", backgroundColor: "#ffffff1a",
width: 120, width: 120,
@ -1107,7 +1116,7 @@ export default function Search({ navigation, route }) {
{isMember == 1 && ( {isMember == 1 && (
<TouchableOpacity <TouchableOpacity
style={{ style={{
...tailwind("text-white px-4 py-2 rounded-xl"), ...tailwind("text-white px-4 py-2 rounded-xl mr-2"),
marginVertical: 6, marginVertical: 6,
backgroundColor: "#ffffff1a", backgroundColor: "#ffffff1a",
width: 120, width: 120,