分类筛选优化

src/components/infiniteScroll/index.tsx

@@ -9,9 +9,9 @@ type Params = {
     hasMore?: false|true,
     children?: ReactNode,
     lowerThresholdNum?: number,
-    
+    paddingBottom?: number
 }
-export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5}: Params) => {
+export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5, paddingBottom = 0}: Params) => {
     const scrollToLower = () => {
         selfonScrollToLower?.()
     }
@@ -24,15 +24,16 @@ export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, low
                 onScrollToLower={() => scrollToLower()}
                 lowerThreshold={lowerThresholdNum}
             >
-                <View>
+                <View style={{paddingBottom:paddingBottom + 'rpx'}}>
                     {children}
+                    <View className={style.infinite_scroll}>
+                        {
+                            hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
+                            <View>没有更多了</View>
+                        }
+                    </View>
                 </View>
-                <View className={style.infinite_scroll}>
+                
-                    {
-                        hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
-                        <View>没有更多了</View>
-                    }
-                </View>
                 <View className="common_safe_area_y"></View>
             </ScrollView>
             

src/components/shopCart/index.module.scss

@@ -40,7 +40,8 @@
         }
     }
     .con{
-        padding:30px 20px 100px 0;
+        padding:30px;
+        padding-bottom: 0;
         box-sizing: border-box;
         flex:1;
         height: 0;

src/components/shopCart/index.tsx

@@ -23,6 +23,7 @@ export default ({show = false, onClose}: param) => {
     const [loading, setLoading] = useState(false)
 
     useEffect(() => {
+        if(!show) return 
         let lists:any[] = []
         for(let i = 0; i < 20; i++) {
             lists = [...lists, {
@@ -33,6 +34,12 @@ export default ({show = false, onClose}: param) => {
             }]
         }
         setList([...lists])
+    }, [show])
+
+    useEffect(() => {
+        return () => {
+            setList([])
+        }
     }, [])
 
     const [showPopup, setShowPopup] = useState(false)
@@ -104,7 +111,7 @@ export default ({show = false, onClose}: param) => {
                     </View>
                     <View className={styles.con}>
                         {loading&&<LoadingCard/>}
-                        {!loading&&list.length > 0&&<InfiniteScroll selfonScrollToLower={() => {console.log('触底了')}}>
+                        {!loading&&list.length > 0&&<InfiniteScroll selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
                             <View className={styles.product_list}>
                                 {list.map((item, index) => {
                                     return <View key={index} className={styles.product_item}>

src/components/swiper/index.tsx

@@ -18,6 +18,12 @@ export default (props:params) => {
             img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d', 
             url:'', 
             id:1
+        },
+        {
+            title:'数据', 
+            img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d', 
+            url:'', 
+            id:2
         }
     ]
 

src/pages/details/components/orderCount/index.tsx

@@ -30,6 +30,7 @@ export default memo(({show = false, onClose}: param) => {
     console.log('执行执行')
 
     useEffect(() => {
+        if(!show) return
         let lists:any[] = []
         for(let i = 0; i < 20; i++) {
             lists = [...lists, {
@@ -41,6 +42,12 @@ export default memo(({show = false, onClose}: param) => {
             }]
         }
         setList([...lists])
+    }, [show])
+
+    useEffect(() => {
+        return () => {
+            setList([])
+        }
     }, [])
 
     const [showPopup, setShowPopup] = useState(false)

src/pages/details/components/swiper/index.module.scss

@@ -12,6 +12,7 @@
         image{
             width: 100%;
             height: 100%;
+            display: block;
         }
     }
     .page{

src/pages/details/components/swiper/index.tsx

@@ -21,11 +21,11 @@ export default ({list = []}: params) => {
 
     return (
         <View className={styles.swiper}>
-            <Swiper className={styles.swiper_item} circular={true} onChange={(e) => swiperChange(e)}>
+            <Swiper className={styles.swiper_item} circular={true}   onAnimationFinish={(e) => swiperChange(e)}>
-            {list.map(item => {
+            {list.map((item) => {
-                return <SwiperItem>
+                return <SwiperItem key={item.id}>
                 <View className={styles.image_item} >
-                    <Image src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'></Image>
+                    <Image mode="aspectFill" src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'></Image>
                 </View>
                 </SwiperItem>
             })}

src/pages/details/index.module.scss

@@ -78,7 +78,6 @@
                 .item_color{
                     width:210px;
                     height: 210px;
-                    background-color: red;
                     border-radius: 20px;
                     image{
                         width: 100%;