首页开发

src/components/sideBar/index.module.scss

@@ -0,0 +1,43 @@
+.sideBar_main{
+    display: flex;
+    height: 100%;
+    .sideBar_select{
+        width: 150px;
+        height: 100%;
+        background-color: #eaeaea;
+        border-radius: 0 10px 10px 0;
+        ::-webkit-scrollbar {
+            display:none;
+            width:0;
+            height:0;
+            color:transparent;
+        }
+        .sideBar_select_title{
+            height: 100px;
+            width: 100%;
+            font-size: $font_size;
+            color: #727272;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-weight: 400;
+            .title_con{
+                width: 74px;
+                @include common_ellipsis($params:4);
+            }
+            
+        }
+        .sideBar_select_title_select{
+            background-color: $color_bg_one;
+            color: $color_font_one;
+        }
+    }
+    .sideBar_con{
+        flex: 1;
+        .sideBar_con_scroll{
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

src/components/sideBar/index.tsx

@@ -0,0 +1,113 @@
+import { ScrollView, View } from "@tarojs/components"
+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";
+
+type ListProps = {
+    title: string,
+    value: number
+}
+
+type Params = {
+    list?: ListProps[],
+    defaultValue?: number|string,
+    children?: ReactNode,
+    height?: string,
+    heightItem?: number,
+    sideBarOnClick?: (ListProps) => void
+}
+
+export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClick, children, heightItem = 100}: Params) => {
+    
+    let num_half = useRef(0)
+
+    const [selected, setSelected] = useState(defaultValue)
+    const [tabId, setTabId] = useState('')
+
+    const init = () => {
+        const index = list?.findIndex(item => {
+            return item.value == defaultValue
+        })
+        if(index !== -1) {
+            computeSelectTab(index)
+        }
+    }
+
+    const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
+        setSelected(item.value)
+        sideBarOnClick?.(item)
+        computeSelectTab(index)
+    }
+    
+    const computeSelectTab = (index) => {
+        if((index + 1) > num_half.current) {
+            let num = index + 1 - num_half.current
+            setTabId(list[num].value.toString())
+        } else {
+            setTabId(list[0].value.toString())
+        }
+    }
+
+    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();
+    })
+
+    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
+    }, [])
+
+    return (
+        <>
+            <View className={classnames(styles.sideBar_main,'side_bar_select')}>
+                <ScrollView scrollWithAnimation={true} style={{height}} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
+                    {
+                        list?.map((item, index) => {
+                            return(
+                                <View  
+                                    className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.value)})}
+                                    onClick={() => clickEvent({item, index})}
+                                    id={`tab_${item.value}`}
+                                    key={item.value}
+                                    style={{height:heightItem+'rpx'}}
+                                >
+                                    {/* {formatTitle(item.title)} */}
+                                    <View className={styles.title_con}>
+                                        {item.title}
+                                    </View>
+                                </View>
+                            )
+                        })
+                    }
+                    <View className="common_safe_area_y"></View>
+                </ScrollView>
+                <View className={styles.sideBar_con}>
+                    <ScrollView className={styles.sideBar_con_scroll} style={{height}} scrollY>
+                        {children}
+                        <View className="common_safe_area_y"></View>
+                    </ScrollView>
+                </View>
+            </View>
+            
+        </>
+    )
+})