页面

src/components/sideBar/index.tsx

@@ -3,7 +3,7 @@ import { memo, ReactNode, useRef, useState } from "react"
 import styles from "./index.module.scss"
 import classnames from "classnames";
 import Taro, { useReady } from "@tarojs/taro";
-import { useCallback } from "react";
+import InfiniteScroll from "../infiniteScroll";
 
 type ListProps = {
     title: string,
@@ -51,30 +51,24 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
     }
 
     useReady(() => {
-        let query = Taro.createSelectorQuery();
-        query.select('.side_bar_select').boundingClientRect(rect=>{
-            let clientHeight = rect.height;
-            let clientWidth = rect.width;
-            let ratio = 750 / clientWidth;
-            let height = clientHeight * ratio;
-            num_half.current = Math.ceil(height/2/heightItem)
-            init()
-        }).exec();
+        Taro.nextTick(() => {
+            let query = Taro.createSelectorQuery();
+            query.select('.side_bar_select').boundingClientRect(rect=>{
+                console.log('rect::',rect)
+                let clientHeight = rect.height;
+                let clientWidth = rect.width;
+                let ratio = 750 / clientWidth;
+                let height = clientHeight * ratio;
+                num_half.current = Math.ceil(height/2/heightItem)
+                init()
+            }).exec();
+        })
     })
 
-    const formatTitle = useCallback((title = '') => {
-        let arr: ReactNode[]= []
-        let str = ''
-        for (let i = 1; i <= title.length; i++) {
-            str += title[i-1]
-            if(i == title.length|| i%2 == 0) {
-                const node = <View className={styles.title_list}>{str}</View>
-                arr.push(node)
-                str = ''
-            }
-        }
-        return arr
-    }, [])
+    //触底事件
+    const onScrolltolower  = () => {
+        console.log('触底了')
+    }
 
     return (
         <>
@@ -90,7 +84,6 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
                                     key={item.value}
                                     style={{height:heightItem+'rpx'}}
                                 >
-                                    {/* {formatTitle(item.title)} */}
                                     <View className={styles.title_con}>
                                         {item.title}
                                     </View>
@@ -101,10 +94,9 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
                     <View className="common_safe_area_y"></View>
                 </ScrollView>
                 <View className={styles.sideBar_con}>
-                    <ScrollView className={styles.sideBar_con_scroll} style={{height}} scrollY>
+                    <InfiniteScroll selfonScrollToLower={() => onScrolltolower()}>
                         {children}
-                        <View className="common_safe_area_y"></View>
-                    </ScrollView>
+                    </InfiniteScroll>
                 </View>
             </View>