公共添加

src/pages/searchList/index.module.scss

@@ -57,11 +57,18 @@
         .filter_scroll{
             flex:1;
             width: 0;
+            ::-webkit-scrollbar {
+                display:none;
+                width:0;
+                height:0;
+                color:transparent;
+            }
         }
         .filter_btn{
             display: flex;
             justify-content: space-between;
             padding: 20px;
+            margin-right: 20px;
             flex:1;
             view{
                 font-size: $font_size_medium;
@@ -75,6 +82,9 @@
                 &:nth-last-child(n+2) {
                     margin-right: 10px;
                 }
+                &:nth-last-child(1) {
+                    margin-right: 30px;
+                }
             }
             .selected{
                 background-color: #ecf5ff;
@@ -94,12 +104,11 @@
             &::before{
                 content: '';
                 opacity: 1;
-                width: 60px;
+                width: 30px;
                 height: 100%;
                 position: absolute;
                 left: -15px;
-                background-color: red;
-                background: linear-gradient(to right, #fff 30%, rgba(255,255,255, 0.3) );
+                background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
                 // z-index: 99;
             }
             .miconfont{
@@ -115,10 +124,15 @@
             font-size: $font_size_min;
             color:$color_font_two;
             padding: 10px 38px;
+            
+        }
+        .list_num_shadow {
+            box-shadow: 0px 5px 5px #ccc;
         }
         .scroll{
             flex:1;
             height:0;
+            padding-top: 3px;
         }
         .product_list{
             padding: 38px;

src/pages/searchList/index.tsx

@@ -6,7 +6,7 @@ import InfiniteScroll from '@/components/infiniteScroll'
 import SortBtn from "@/components/sortBtn";
 import Tabs from "@/components/tabs";
 import styles  from './index.module.scss'
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 export default () => {
     const [showFilter, setShowFilter] = useState(false)
@@ -21,6 +21,14 @@ export default () => {
         {title: '系列', value:5},
         {title: '系列', value:5},
     ])
+    const [scrollStatus, setScrollStatus] = useState(false)
+    const onscroll = useCallback((e) => {
+        if(e.detail.scrollTop > 20) {
+            setScrollStatus(true)
+        } else {
+            setScrollStatus(false)
+        }
+    },[])
     return (
         <View className={styles.main}>
             <View className={styles.search}>
@@ -60,9 +68,12 @@ export default () => {
 
             </View>
             <View className={styles.list}>
-                <View className={styles.list_num}>搜索结果 (2条记录)</View>
+                <View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
                 <View className={styles.scroll}>
-                    <InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
+                    <InfiniteScroll 
+                        selfonScrollToLower={() => console.log('123123')} 
+                        selfOnScroll={(e) => onscroll(e)}
+                    >
                         <View className={styles.product_list}>
                             {new Array(9).fill(' ').map(item => {
                                 return <View className={styles.product_item}>