搜索列表

src/components/tabs/index.module.scss

@@ -0,0 +1,41 @@
+.tabs_main{
+    display: flex;
+    .tabs_scroll{
+        width: 100%;
+        display: flex;
+        white-space: nowrap;
+        border-bottom: 1px solid $color_font_two;
+        border-top: 1px solid $color_font_two;
+        height: 102px;
+        
+        .tabs_item{
+            flex:1;
+            display: inline-block;
+            padding: 10px 20px;
+            height: 100%;
+            box-sizing: border-box;
+            position: relative;
+            .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/components/tabs/index.tsx

@@ -0,0 +1,60 @@
+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 [selected, setSelected] = useState(defaultValue)
+    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}) => {
+        setSelected(item.value)
+        tabsOnClick?.(item)
+        const num = index > 0?( index - 1) : 0
+        setTabId(list[num].value.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={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
+                                        <View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
+                                        {(selected == item.value) && <View className={styles.tabs_index}></View>}
+                                    </View>
+                                )
+                            })
+                        }
+                    </View>
+                </ScrollView>
+            </View>
+        </>
+    )
+})