对接api

src/components/sideBar/index.tsx

@@ -1,24 +1,23 @@
 import { ScrollView, View } from "@tarojs/components"
-import { memo, ReactNode, useRef, useState } from "react"
+import { memo, ReactNode, useEffect, useRef, useState } from "react"
 import styles from "./index.module.scss"
 import classnames from "classnames";
 import Taro, { useReady } from "@tarojs/taro";
 import InfiniteScroll from "../infiniteScroll";
 
-type ListProps = {
-    title: string,
-    value: number
-}
+
 
 type Params = {
-    list?: ListProps[],
+    list?: any[],
     defaultValue?: number|string,
     children?: ReactNode,
     height?: string,
     heightItem?: number,
-    sideBarOnClick?: (ListProps) => void,
+    sideBarOnClick?: (val:any) => void,
     refresherTriggered?: true|false,
     selfOnRefresherRefresh?: () => void
+    selfOnScrolltolower?: () => void,
+    hasMore?: true|false
 }
 
 export default memo(({list = [], 
@@ -28,7 +27,9 @@ export default memo(({list = [],
     children, 
     heightItem = 100, 
     refresherTriggered = false,
-    selfOnRefresherRefresh
+    selfOnRefresherRefresh,
+    selfOnScrolltolower,
+    hasMore = true
 }: Params) => {
     
     let num_half = useRef(0)
@@ -36,17 +37,21 @@ export default memo(({list = [],
     const [selected, setSelected] = useState(defaultValue)
     const [tabId, setTabId] = useState('')
 
+    useEffect(() => {
+        setSelected(defaultValue)
+    }, [defaultValue])
+
     const init = () => {
         const index = list?.findIndex(item => {
-            return item.value == defaultValue
+            return item.id == defaultValue
         })
         if(index !== -1) {
             computeSelectTab(index)
         }
     }
 
-    const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
-        setSelected(item.value)
+    const clickEvent = ({item, index}: {item, index:number}) => {
+        setSelected(item.id)
         sideBarOnClick?.(item)
         computeSelectTab(index)
     }
@@ -54,9 +59,10 @@ export default memo(({list = [],
     const computeSelectTab = (index) => {
         if((index + 1) > num_half.current) {
             let num = index + 1 - num_half.current
-            setTabId(list[num].value.toString())
+            setTabId(list[num].id.toString())
         } else {
-            setTabId(list[0].value.toString())
+            setTabId(list[0].id.toString())
+            
         }
     }
 
@@ -75,10 +81,7 @@ export default memo(({list = [],
         })
     })
 
-    //触底事件
-    const onScrolltolower  = () => {
-        console.log('触底了')
-    }
+   
 
     return (
         <>
@@ -88,14 +91,14 @@ export default memo(({list = [],
                         list?.map((item, index) => {
                             return(
                                 <View  
-                                    className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.value)})}
+                                    className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.id)})}
                                     onClick={() => clickEvent({item, index})}
-                                    id={`tab_${item.value}`}
-                                    key={item.value}
+                                    id={`tab_${item.id}`}
+                                    key={item.id}
                                     style={{height:heightItem+'rpx'}}
                                 >
                                     <View className={styles.title_con}>
-                                        {item.title}
+                                        {item.name}
                                     </View>
                                 </View>
                             )
@@ -104,7 +107,7 @@ export default memo(({list = [],
                     <View className="common_safe_area_y"></View>
                 </ScrollView>
                 <View className={styles.sideBar_con}>
-                    <InfiniteScroll selfonScrollToLower={() => onScrolltolower()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
+                    <InfiniteScroll hasMore={hasMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
                         {children}
                     </InfiniteScroll>
                 </View>