改善筛选功能
This commit is contained in:
al
parent
03ca571f07
commit
f0ea1ec904
|
|
@ -16,7 +16,7 @@ export default function MySlider({
|
|||
unit,
|
||||
lable,
|
||||
height = 60,
|
||||
width = Dimensions.get("window").width - 48,
|
||||
width = Dimensions.get("window").width - 44,
|
||||
onChange,
|
||||
onAfterChange = () => {},
|
||||
defaultValue = 0,
|
||||
|
|
@ -42,6 +42,8 @@ export default function MySlider({
|
|||
const tailwind = useTailwind();
|
||||
const leftWatcher = useRef(null);
|
||||
const rightWatcher = useRef(null);
|
||||
const currentLeftValue = useRef(leftValue);
|
||||
const currentRightValue = useRef(rightValue);
|
||||
useEffect(() => {
|
||||
leftWatcher.current = PanResponder.create({
|
||||
// 建立监视器
|
||||
|
|
@ -61,12 +63,16 @@ export default function MySlider({
|
|||
}, []);
|
||||
useEffect(() => {
|
||||
// if(itemKey)
|
||||
const currentLeftProcess = 0;
|
||||
const currentLeftProcess =
|
||||
(stepValues.indexOf(leftValue) * step - lower_bound) /
|
||||
(upper_bound - lower_bound);
|
||||
const currentRightProcess =
|
||||
(stepValues.indexOf(rightValue) * step - lower_bound) /
|
||||
(upper_bound - lower_bound);
|
||||
setLeftProcess(currentLeftProcess);
|
||||
setRightProcess(currentRightProcess);
|
||||
currentLeftValue.current = leftValue;
|
||||
currentRightValue.current = rightValue;
|
||||
}, [leftValue, rightValue]);
|
||||
// useEffect(() => {
|
||||
|
||||
|
|
@ -114,24 +120,35 @@ export default function MySlider({
|
|||
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 < rightProcess) {
|
||||
if (newProcess < currentRightProcess) {
|
||||
setLeftProcess(newProcess);
|
||||
setStepNum((old) => old + 1);
|
||||
onChange({
|
||||
lower_bound: Math.round(
|
||||
leftProcess * (upper_bound - lower_bound) + lower_bound
|
||||
),
|
||||
upper_bound: rightValue,
|
||||
lower_bound:
|
||||
stepValues[
|
||||
Math.round(
|
||||
(newProcess * (upper_bound - lower_bound) + lower_bound) /
|
||||
step
|
||||
)
|
||||
],
|
||||
upper_bound: currentRightValue.current,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (newProcess > leftProcess) {
|
||||
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: leftValue,
|
||||
lower_bound: currentLeftValue.current,
|
||||
upper_bound:
|
||||
stepValues[
|
||||
Math.round(
|
||||
|
|
@ -167,6 +184,38 @@ export default function MySlider({
|
|||
}}
|
||||
>
|
||||
<View style={{ width: "100%", position: "relative" }}>
|
||||
{/* 格子步数 */}
|
||||
{hasInfinity && (
|
||||
<View
|
||||
style={{
|
||||
...tailwind("flex flex-row justify-between items-center"),
|
||||
position: "absolute",
|
||||
top: -23,
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
// height: 40,
|
||||
padding: 17,
|
||||
paddingRight: 20,
|
||||
marginLeft: -12,
|
||||
// backgroundColor: "#fff",
|
||||
}}
|
||||
>
|
||||
{stepValues.map((item, index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={{
|
||||
backgroundColor:
|
||||
item >= leftValue && item <= rightValue
|
||||
? minimumTrackTintColor
|
||||
: maximumTrackTintColor,
|
||||
width: thumbSize / 2,
|
||||
height: thumbSize / 2,
|
||||
borderRadius: 50,
|
||||
}}
|
||||
></View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: maximumTrackTintColor,
|
||||
|
|
@ -195,42 +244,70 @@ export default function MySlider({
|
|||
}}
|
||||
/>
|
||||
</View>
|
||||
{/* 左侧控件 */}
|
||||
<View
|
||||
transition={1000}
|
||||
cachePolicy="disk"
|
||||
// style={tailwind("w-full h-full rounded-lg overflow-hidden")}
|
||||
style={{
|
||||
width: thumbSize,
|
||||
height: thumbSize,
|
||||
borderRadius: 50,
|
||||
width: thumbSize * 3,
|
||||
height: thumbSize * 3,
|
||||
position: "absolute",
|
||||
left: leftProcess * processWidth,
|
||||
marginTop: -processHeight / 2,
|
||||
left: leftProcess * processWidth - thumbSize,
|
||||
zIndex: 10,
|
||||
backgroundColor: "#ff75c8",
|
||||
borderColor: "#ffffff",
|
||||
borderWidth: 2,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
// 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,
|
||||
marginTop: -processHeight / 2,
|
||||
backgroundColor: "#ff75c8",
|
||||
borderColor: "#ffffff",
|
||||
borderWidth: 2,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
{/* 右侧控件 */}
|
||||
<View
|
||||
transition={1000}
|
||||
cachePolicy="disk"
|
||||
// style={tailwind("w-full h-full rounded-lg overflow-hidden")}
|
||||
style={{
|
||||
width: thumbSize,
|
||||
height: thumbSize,
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 50,
|
||||
width: thumbSize * 3,
|
||||
height: thumbSize * 3,
|
||||
position: "absolute",
|
||||
left: rightProcess * processWidth,
|
||||
left: rightProcess * processWidth - thumbSize,
|
||||
zIndex: 10,
|
||||
backgroundColor: "#ff75c8",
|
||||
borderColor: "#ffffff",
|
||||
borderWidth: 2,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
// borderWidth: 2,
|
||||
}}
|
||||
{...rightWatcher.current?.panHandlers}
|
||||
></View>
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: thumbSize,
|
||||
height: thumbSize,
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 50,
|
||||
backgroundColor: "#ff75c8",
|
||||
borderColor: "#ffffff",
|
||||
borderWidth: 2,
|
||||
}}
|
||||
></View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
...tailwind("flex flex-row justify-between items-center"),
|
||||
|
|
@ -246,7 +323,14 @@ export default function MySlider({
|
|||
color: "#ff75c8",
|
||||
}}
|
||||
>
|
||||
{Math.round(leftProcess * (upper_bound - lower_bound) + lower_bound)}
|
||||
{hasInfinity && leftProcess == 1
|
||||
? ">" + upper_bound
|
||||
: stepValues[
|
||||
Math.round(
|
||||
(leftProcess * (upper_bound - lower_bound) + lower_bound) /
|
||||
step
|
||||
)
|
||||
]}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -303,9 +303,9 @@ export default function My({ navigation }) {
|
|||
<Text
|
||||
style={{
|
||||
color: data?.is_a_member === 1 ? "#FFADBE" : "white",
|
||||
whiteSpace: "nowrap",
|
||||
// whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
// textOverflow: "ellipsis",
|
||||
maxWidth: 240,
|
||||
...tailwind("text-2xl font-medium"),
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Dimensions,
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useTailwind } from "tailwind-rn";
|
||||
|
|
@ -646,7 +647,12 @@ export default function Search({ navigation, route }) {
|
|||
/>
|
||||
</View>
|
||||
<ScrollView style={tailwind("flex-1")}>
|
||||
<View style={tailwind("flex flex-row justify-around")}>
|
||||
<View
|
||||
style={{
|
||||
...tailwind("flex flex-row"),
|
||||
justifyContent: "space-evenly",
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setIsFilterVisible({
|
||||
|
|
@ -736,6 +742,12 @@ export default function Search({ navigation, route }) {
|
|||
>
|
||||
<BottomSheet
|
||||
// containerStyle={{ marginTop: 80 }}
|
||||
onBackdropPress={() =>
|
||||
setIsFilterVisible({
|
||||
zone_admission_price: false,
|
||||
comprehensive: false,
|
||||
})
|
||||
}
|
||||
backdropStyle={{ backgroundColor: "#0000004d" }}
|
||||
scrollViewProps={{
|
||||
contentContainerStyle: {
|
||||
|
|
@ -755,12 +767,13 @@ export default function Search({ navigation, route }) {
|
|||
}}
|
||||
isVisible={isFilterVisible.comprehensive}
|
||||
style={{
|
||||
paddingTop: 110,
|
||||
paddingTop: Platform.OS != "ios" ? 55 : 110,
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
{filters.map((item, index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={{
|
||||
...tailwind(`p-4 rounded-xl`),
|
||||
backgroundColor: "#13121f",
|
||||
|
|
@ -818,7 +831,7 @@ export default function Search({ navigation, route }) {
|
|||
setFiltersValue((old) => ({ ...old, weight: value }));
|
||||
}
|
||||
}}
|
||||
maximumTrackTintColor="#ff75c81a"
|
||||
maximumTrackTintColor="#382435"
|
||||
minimumTrackTintColor="#ff75c8"
|
||||
processHeight={5}
|
||||
unit={item.unit}
|
||||
|
|
@ -870,9 +883,34 @@ export default function Search({ navigation, route }) {
|
|||
))}
|
||||
<View
|
||||
style={{
|
||||
...tailwind("flex-row justify-around mb-4"),
|
||||
...tailwind("flex-row justify-around items-center mb-4 p-4"),
|
||||
}}
|
||||
>
|
||||
{Platform.OS != "ios" && (
|
||||
<View
|
||||
style={{
|
||||
...tailwind(
|
||||
"p-2 rounded-xl flex justify-center items-center mr-2"
|
||||
),
|
||||
backgroundColor: "#ffffff1a",
|
||||
width: 46,
|
||||
height: 46,
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
type="ionicon"
|
||||
name="close"
|
||||
size={32}
|
||||
color="white"
|
||||
onPress={() =>
|
||||
setIsFilterVisible({
|
||||
zone_admission_price: false,
|
||||
comprehensive: false,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{isMember == 1 && (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
|
|
@ -918,6 +956,7 @@ export default function Search({ navigation, route }) {
|
|||
marginVertical: 6,
|
||||
backgroundColor: "#ff75c8",
|
||||
minWidth: 120,
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
|
|
@ -935,6 +974,12 @@ export default function Search({ navigation, route }) {
|
|||
</BottomSheet>
|
||||
<BottomSheet
|
||||
backdropStyle={{ backgroundColor: "#0000004d" }}
|
||||
onBackdropPress={() =>
|
||||
setIsFilterVisible({
|
||||
zone_admission_price: false,
|
||||
comprehensive: false,
|
||||
})
|
||||
}
|
||||
scrollViewProps={{
|
||||
contentContainerStyle: {
|
||||
// paddingTop: 20,
|
||||
|
|
@ -953,7 +998,7 @@ export default function Search({ navigation, route }) {
|
|||
}}
|
||||
isVisible={isFilterVisible.zone_admission_price}
|
||||
style={{
|
||||
paddingTop: 110,
|
||||
paddingTop: Platform.OS != "ios" ? 55 : 110,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
|
|
@ -965,8 +1010,9 @@ export default function Search({ navigation, route }) {
|
|||
height: screenDimensions.height - 120,
|
||||
}}
|
||||
>
|
||||
{priceFilters.map((item) => (
|
||||
{priceFilters.map((item, index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={{
|
||||
...tailwind(`p-4 rounded-xl`),
|
||||
backgroundColor: "#13121f",
|
||||
|
|
@ -1017,7 +1063,7 @@ export default function Search({ navigation, route }) {
|
|||
}));
|
||||
}
|
||||
}}
|
||||
maximumTrackTintColor="#ff75c81a"
|
||||
maximumTrackTintColor="#382435"
|
||||
minimumTrackTintColor="#ff75c8"
|
||||
processHeight={5}
|
||||
unit={item.unit}
|
||||
|
|
@ -1027,12 +1073,37 @@ export default function Search({ navigation, route }) {
|
|||
))}
|
||||
<View
|
||||
style={{
|
||||
...tailwind("flex-row justify-around mb-4"),
|
||||
...tailwind("flex-row justify-around mb-4 p-4"),
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{Platform.OS != "ios" && (
|
||||
<View
|
||||
style={{
|
||||
...tailwind(
|
||||
"p-2 rounded-xl flex justify-center items-center mr-2"
|
||||
),
|
||||
backgroundColor: "#ffffff1a",
|
||||
width: 46,
|
||||
height: 46,
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
type="ionicon"
|
||||
name="close"
|
||||
size={32}
|
||||
color="white"
|
||||
onPress={() =>
|
||||
setIsFilterVisible({
|
||||
zone_admission_price: false,
|
||||
comprehensive: false,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{isMember == 1 && (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
|
|
@ -1077,9 +1148,10 @@ export default function Search({ navigation, route }) {
|
|||
}}
|
||||
style={{
|
||||
...tailwind("text-white px-4 py-2 rounded-xl"),
|
||||
marginVertical: 6,
|
||||
// marginVertical: 6,
|
||||
backgroundColor: "#ff75c8",
|
||||
minWidth: 120,
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
|
|
|
|||
Loading…
Reference in New Issue