🎈 perf(我的页面优化):

2022-08-01 00:32:59 +08:00
parent 2b15dc578c
commit 6ea58ad911
10 changed files with 1672 additions and 1587 deletions
@@ -1,47 +1,54 @@
-import { ScrollView, View } from "@tarojs/components"
-import { memo, useEffect, useState } from "react"
-import styles  from './index.module.scss'
-import classnames from "classnames";
+import { ScrollView, View } from '@tarojs/components'
+import { memo, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'

 type Param = {
-    list: {id: number, name: string}[],
-    defaultId?: number|null,
-    onSelect?: (val: number) => void
+  list: { id: number; name: string }[]
+  defaultId?: number | null
+  onSelect?: (val: number) => void
 }
-export default memo(({list = [], defaultId = null, onSelect}: Param) => {
-    const [selectInfo, setSelectInfo] = useState({
-        selected: -1, //当前选中的id
-        tabId: '', //需要滚动到的id
-    })
-    useEffect(() => {
-        if(defaultId) {
-            console.log('defaultId:::', defaultId)
-            const index = list?.findIndex(item => {
-                return item.id == defaultId 
-            })
-            if(index !== -1) {
-                const num = index > 0?( index - 1) : 0
-                setSelectInfo((e) => ({...e, tabId:list[num].id.toString()}))
-            }
-        }
-        setSelectInfo((e) => ({...e, selected: defaultId||-1}))
-    }, [defaultId])
-    const clickEvent = ({item, index}: {item:any, index:number}) => {
-        const num = index > 0?( index - 1) : 0
-        setSelectInfo((e) => ({...e, tabId:list[num].id.toString(), selected: item.id}))
-        onSelect?.(item.id)
+export default memo(({ list = [], defaultId = null, onSelect }: Param) => {
+  const [selectInfo, setSelectInfo] = useState({
+    selected: -1, //当前选中的id
+    tabId: '', //需要滚动到的id
+  })
+  useEffect(() => {
+    if (defaultId) {
+      console.log('defaultId:::', defaultId)
+      const index = list?.findIndex((item) => {
+        return item.id == defaultId
+      })
+      if (index !== -1) {
+        const num = index > 0 ? index - 1 : 0
+        setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString() }))
+      }
    }
+    setSelectInfo((e) => ({ ...e, selected: defaultId || -1 }))
+  }, [defaultId])
+  const clickEvent = ({ item, index }: { item: any; index: number }) => {
+    const num = index > 0 ? index - 1 : 0
+    setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString(), selected: item.id }))
+    onSelect?.(item.id)
+  }

-    return (
-        <View className={styles.order_status_list}>
-          <ScrollView scrollX  scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
-            <View className={styles.order_list_scroll}> 
-              {list.map((item, index) => {
-                return <View key={item.id} id={`tabs_${item.id}`} onClick={() => clickEvent({item, index})}  className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name}</View>
-              })}
-            </View>
-          </ScrollView>
+  return (
+    <View className={styles.order_status_list}>
+      <ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
+        <View className={styles.order_list_scroll}>
+          {list.map((item, index) => {
+            return (
+              <View
+                key={item.id}
+                id={`tabs_${item.id}`}
+                onClick={() => clickEvent({ item, index })}
+                className={classnames(styles.order_status_item, selectInfo.selected == item.id && styles.selected)}>
+                {item.name}
+              </View>
+            )
+          })}
        </View>
-    )
+      </ScrollView>
+    </View>
+  )
 })
-