🦄 refactor:购物车添加虚拟列表

src/components/shoppingCart/index.module.scss

@@ -76,7 +76,7 @@
         display: flex;
         margin-bottom: 24px;
         align-items: center;
-
+        padding-bottom: 10px;
 
         .kingFont {
             font-size: 28px;
@@ -91,7 +91,7 @@
             width: 148px;
             height: 30px;
             border-radius: 4px;
-            border: 1px solid #E42945;
+            border: 1PX solid #E42945;
             font-size: 22px;
             font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
@@ -106,15 +106,22 @@
         margin-bottom: 32px;
     }
 
-    .scrollview {
-        height: 500px;
+    .scrollviewBig {
+        .scrollview {
+            height: 300px;
 
-        .kongBox {
-            height: 181px;
-            width: 100%;
+            .kongBox {
+                height: 181px;
+                width: 100%;
+            }
+        }
+
+        .kongOne {
+            height: 100px;
         }
     }
 
+
     .posBox {
         width: 100%;
         position: fixed;

src/components/shoppingCart/index.tsx

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Popup from '@/components/popup'
 import Goods from "@/components/goodsItem"
 import BottomCustomer from "@/components/BottomCustomer"
-
+import VirtualList from '@tarojs/components/virtual-list'
 
 interface prosObj {
     showPopup?: false | true,
@@ -86,9 +86,20 @@ export default memo(forwardRef((props: prosObj, ref) => {
 
         return s;
     }, [goodList])
+    // onInputEven={(e, obj) => oninputEvent?.(e, obj)}
 
-
-
+    const rows = memo(({ id, index, style, data }: any) => {
+        let item = data[index]
+        return (
+            <>
+                <Goods modeFont={(modeFont as number)}
+                    handPlus={(item) => handPlus?.(item)}
+                    value={item || {}}
+                    clickAdd={(item) => addNums?.(item)}
+                    clickReduce={(item) => { reduceNums?.(item) }}></Goods>
+            </>
+        )
+    })
 
     return (
         <Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
@@ -114,20 +125,21 @@ export default memo(forwardRef((props: prosObj, ref) => {
                 <View className={styles.searchBox}>
                     <Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
                 </View>
-                <ScrollView
-                    className={styles.scrollview}
-                    scroll-y={true}
-                >
+                <View className={styles.scrollviewBig}>
+                    <VirtualList
+                        className={styles.scrollview}
+                        height={300} /* 列表的高度 */
+                        width='100%' /* 列表的宽度 */
+                        itemData={goodList} /* 渲染列表的数据 */
+                        itemCount={goodList.length + 0} /*  渲染列表的长度 */
+                        itemSize={100} /* 列表单项的高度  */
+                        overscanCount={1}>
+                        {rows}
+                    </VirtualList>
+                    <View className={styles.kongOne}></View>
+                </View>
+
 
-                    {
-                        goodList.map((item, index) => {
-                            return (
-                                <Goods modeFont={(modeFont as number)} handPlus={(item) => handPlus?.(item)} key={index} value={item} onInputEven={(e, obj) => oninputEvent?.(e, obj)} clickAdd={(item) => addNums?.(item)} clickReduce={(item) => { reduceNums?.(item) }}></Goods>
-                            )
-                        })
-                    }
-                    <View className={styles.kongBox}></View>
-                </ScrollView>
                 <View className={styles.posBox}>
                     <BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer>
                 </View>
@@ -135,4 +147,7 @@ export default memo(forwardRef((props: prosObj, ref) => {
         </Popup>
 
     )
-}))
+
+
+}))
+