🎈 perf(首页优化页面基本完成，未对接):

src/components/search/index.module.scss

@@ -15,7 +15,7 @@
     width: 100%;
     input {
       font-size: 27px;
-      background: #eee;
+      background: #f6f7f9;
       width: 100%;
       height: 72px;
       border-radius: 50px;

src/components/sideBar/index.module.scss

@@ -1,45 +1,54 @@
-.sideBar_main{
-    display: flex;
+.sideBar_main {
+  display: flex;
+  height: 100%;
+  .sideBar_select {
+    width: 160px;
     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: #007AFF;
-            color: #fff;
-            border-radius: 0px 14px 14px 0px;
-        }
+    background-color: #eaeaea;
+    border-radius: 0 10px 10px 0;
+    ::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+      color: transparent;
     }
-    .sideBar_con{
-        flex: 1;
-        .sideBar_con_scroll{
-            width: 100%;
-            height: 100%;
-        }
+    .sideBar_select_title {
+      height: 100px;
+      width: 100%;
+      font-size: $font_size;
+      color: rgba(0, 0, 0, 0.6);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-weight: 400;
+      .title_con {
+        padding: 0 20px;
+        text-align: center;
+        // width: 74px;
+        @include common_ellipsis($params: 4);
+      }
     }
-    
-}
+    .sideBar_select_title_select {
+      background-color: #007aff;
+      color: #fff;
+      border-radius: 0px 14px 14px 0px;
+    }
+  }
+  .sideBar_con {
+    flex: 1;
+    min-width: 0;
+    position: relative;
+    padding-top: 90px;
+    .product_class {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      z-index: 999;
+    }
+    .sideBar_con_scroll {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

src/components/sideBar/index.tsx

@@ -1,117 +1,126 @@
-import { ScrollView, View } from "@tarojs/components"
-import React, { 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, {StatusParam} from "../infiniteScroll";
-import LoadingCard from "../loadingCard";
-
+import { ScrollView, View } from '@tarojs/components'
+import React, { 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, { StatusParam } from '../infiniteScroll'
+import LoadingCard from '../loadingCard'
+import ProductClass from '@/pages/index/components/productClass'
 
 type Params = {
-    list?: any[],
-    defaultValue?: number|string,
-    children?: ReactNode,
-    height?: string,
-    heightItem?: number,
-    sideBarOnClick?: (val:any) => void,
-    refresherTriggered?: true|false,
-    selfOnRefresherRefresh?: () => void
-    selfOnScrolltolower?: () => void,
-    hasMore?: true|false,
-    statusMore?: StatusParam
+  list?: any[]
+  defaultValue?: number | string
+  children?: ReactNode
+  height?: string
+  heightItem?: number
+  sideBarOnClick?: (val: any) => void
+  refresherTriggered?: true | false
+  selfOnRefresherRefresh?: () => void
+  selfOnScrolltolower?: () => void
+  hasMore?: true | false
+  statusMore?: StatusParam
 }
 
-export default memo(({list = [], 
-    defaultValue = 0, 
-    height='100vh', 
-    sideBarOnClick, 
-    children, 
-    heightItem = 100, 
+export default memo(
+  ({
+    list = [],
+    defaultValue = 0,
+    height = '100vh',
+    sideBarOnClick,
+    children,
+    heightItem = 100,
     refresherTriggered = false,
     selfOnRefresherRefresh,
     selfOnScrolltolower,
     hasMore = true,
-    statusMore = 0
-}: Params) => {
-    
+    statusMore = 0,
+  }: Params) => {
     let num_half = useRef(0)
 
     const [selected, setSelected] = useState(defaultValue)
     const [tabId, setTabId] = useState('')
 
     useEffect(() => {
-        setSelected(defaultValue)
+      setSelected(defaultValue)
     }, [defaultValue])
 
     const init = () => {
-        const index = list?.findIndex(item => {
-            return item.id == defaultValue
-        })
-        if(index !== -1) {
-            computeSelectTab(index)
-        }
+      const index = list?.findIndex((item) => {
+        return item.id == defaultValue
+      })
+      if (index !== -1) {
+        computeSelectTab(index)
+      }
     }
 
-    const clickEvent = ({item, index}: {item, index:number}) => {
-        setSelected(item.id)
-        sideBarOnClick?.(item)
-        computeSelectTab(index)
+    const clickEvent = ({ item, index }: { item; index: number }) => {
+      setSelected(item.id)
+      sideBarOnClick?.(item)
+      computeSelectTab(index)
     }
-    
+
     const computeSelectTab = (index) => {
-        if((index + 1) > num_half.current) {
-            let num = index + 1 - num_half.current
-            setTabId(list[num].id.toString())
-        } else {
-            setTabId(list[0].id.toString())
-            
-        }
+      if (index + 1 > num_half.current) {
+        let num = index + 1 - num_half.current
+        setTabId(list[num].id.toString())
+      } else {
+        setTabId(list[0].id.toString())
+      }
     }
 
     useReady(() => {
-        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();
-        })
+      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 [openClass, setOpenClass] = useState(false)
+
     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.id)})}
-                                    onClick={() => clickEvent({item, index})}
-                                    id={`tab_${item.id}`}
-                                    key={item.id}
-                                    style={{height:heightItem+'rpx'}}
-                                >
-                                    <View className={styles.title_con}>
-                                        {item.name}
-                                    </View>
-                                </View>
-                            )
-                        })
-                    }
-                </ScrollView>
-                <View className={styles.sideBar_con}>
-                    <InfiniteScroll statusMore={statusMore} hasMore={hasMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
-                        {children}
-                    </InfiniteScroll>
+      <>
+        <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.id })}
+                  onClick={() => clickEvent({ item, index })}
+                  id={`tab_${item.id}`}
+                  key={item.id}
+                  style={{ height: heightItem + 'rpx' }}>
+                  <View className={styles.title_con}>{item.name}</View>
                 </View>
+              )
+            })}
+          </ScrollView>
+          <View className={styles.sideBar_con}>
+            <View className={styles.product_class} style={{ height: openClass ? '100%' : '' }}>
+              <ProductClass open={openClass} onOpenClick={(val) => setOpenClass(val)} />
             </View>
-            
-        </>
+            <InfiniteScroll
+              statusMore={statusMore}
+              hasMore={hasMore}
+              selfonScrollToLower={() => selfOnScrolltolower?.()}
+              refresherTriggered={refresherTriggered}
+              refresherEnabled={true}
+              selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
+              {children}
+            </InfiniteScroll>
+          </View>
+        </View>
+      </>
     )
-})
+  },
+)