高级搜索

src/pages/searchList/components/selectData/index.module.scss

@@ -0,0 +1,49 @@
+.tabs_main{
+    display: flex;
+    width: 100%;
+    .tabs_scroll{
+        width: 100%;
+        display: flex;
+        white-space: nowrap;
+        ::-webkit-scrollbar {
+            display:none;
+            width:0;
+            height:0;
+            color:transparent;
+        }
+        .tabs_item{
+            flex:1;
+            display: inline-block;
+            font-size: 24rpx;
+            background-color: #F0F0F0;
+            border-radius: 24rpx;
+            min-width: 126rpx;
+            height: 46.93rpx;
+            text-align: center;
+            line-height: 46.93rpx;
+            color: #707070;
+            margin-right: 20px;
+            .tabs_item_con{
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: $font_size_medium;
+            }
+            .tabs_index{
+                height: 5px;
+                width: 100%;
+                background-color:$color_main;
+                position:absolute;
+                bottom: 0;
+                left:0;
+                border-radius: 50px;
+            }
+            .tabs_item_select{
+                color: $color_main;
+            }
+        }
+        
+        
+    }
+}

src/pages/searchList/components/selectData/index.tsx

@@ -0,0 +1,57 @@
+import { ScrollView, View } from "@tarojs/components";
+import { memo, useState, ReactNode, useEffect } from "react";
+import classnames from "classnames";
+import styles from './index.module.scss'
+
+
+type ListProps = {
+    title: string,
+    value: number
+}
+
+type Params = {
+    list?: ListProps[],
+    defaultValue?: number|string,
+    children?: ReactNode,
+    tabsOnClick?: (ListProps) => void,
+
+}
+
+export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
+    
+    const [tabId, setTabId] = useState('')
+
+    useEffect(() => {
+        const index = list?.findIndex(item => {
+            return item.value == defaultValue 
+        })
+        if(index !== -1) {
+            const num = index > 0?( index - 1) : 0
+            setTabId(list[num].value.toString())
+        }
+    }, [])
+
+    const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
+        tabsOnClick?.(item)
+        setTabId(index.toString())
+    }
+    return (
+        <>
+            <View className={styles.tabs_main} id="tabs_main_ref">
+                <ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation={true} scrollIntoView={`tabs_${tabId}`}>
+                    <View className={styles.tabs_scroll}>
+                        {
+                            list.map((item, index) => {
+                                return (
+                                    <View key={index} id={`tabs_${index}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
+                                        <View  className={classnames(styles.tabs_item_con)}>{item.title}</View>
+                                    </View>
+                                )
+                            })
+                        }
+                    </View>
+                </ScrollView>
+            </View>
+        </>
+    )
+})