公共添加

src/components/address/index.module.scss

@@ -0,0 +1,59 @@
+.address_main{
+    width: 100%;
+    box-sizing: border-box;
+    .address_title{
+        display: flex;
+        justify-content: space-between;
+        color:$color_font_two;
+        font-size: $font_size;
+        padding: 20px;
+        padding-bottom: 0;
+    }
+    .address_select{
+        display: flex;
+        padding: 30px 0;
+        margin-top: 10px;
+        font-size: $font_size_medium;
+        border-bottom: 1px solid $color_font_two;
+        color: $common_title_font_color;
+        position: relative;
+        .address_item{
+            padding: 0 20px;
+            max-width: 200px;
+            @include common_ellipsis()
+        }
+        .bottom_index{
+            width: 100px;
+            height: 2px;
+            border-radius: 50px;
+            background-color:$color_font_two;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            transition: left 0.1s;
+        }
+    }
+    .address_scroll{
+        height: 600px;
+        .address_scroll_list{
+            padding: 0 20px;
+            font-size: $common_main_font_size2;
+            .address_list_item{
+                padding: 20px 0;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .address_list_item_name{
+                    @include common_ellipsis()
+                }
+                .address_iconfont{
+                    font-size: 30px !important;
+                }
+            }
+        }
+        
+    }
+    .addresst_select{
+        color:$color_font_two;
+    }
+}

src/components/address/index.tsx

@@ -0,0 +1,233 @@
+import { ScrollView, Text, View } from "@tarojs/components";
+import { memo, ReactHTMLElement, useEffect, useRef, useState } from "react";
+import Drawer from "@/components/popup";
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Taro from "@tarojs/taro";
+
+type Params = {
+    addressOnSelect?: ({}:{name: string, id:string|number}) => void,
+    addressOnClose?: () => void,
+    show?: true|false
+}
+
+export default memo(({
+    addressOnSelect,
+    addressOnClose,
+    show = false
+
+}: Params) => {
+    const list1 = [
+        {
+            name:'广东1',
+            id:1
+        },
+        {
+            name:'广东2',
+            id:2
+        },
+        {
+            name:'广东3',
+            id:3
+        },
+        {
+            name:'广东4',
+            id:4
+        },
+        {
+            name:'广东5',
+            id:5
+        },
+        {
+            name:'广东6',
+            id:6
+        }
+    ]
+
+    const list2 = [
+        {
+            name:'佛山1佛山1佛山1佛山1佛山1',
+            id:7
+        },
+        {
+            name:'佛山2',
+            id:8
+        },
+        {
+            name:'佛山3',
+            id:9
+        },
+        {
+            name:'佛山4',
+            id:10
+        },
+        {
+            name:'佛山5',
+            id:11
+        },
+        {
+            name:'佛山6',
+            id:12
+        }
+    ]
+
+    const list3 = [
+        {
+            name:'禅城区1',
+            id:13
+        },
+        {
+            name:'禅城区2',
+            id:14
+        },
+        {
+            name:'禅城区3',
+            id:15
+        },
+        {
+            name:'禅城区4',
+            id:16
+        },
+        {
+            name:'禅城区5',
+            id:17
+        },
+        {
+            name:'禅城区6',
+            id:18
+        }
+    ]
+
+    const [list, setList] = useState(list1)
+    const [selectIndex, setSelectIndex] = useState(0) //0 省， 1 市，2 区
+    const [selectId, setSelectId] = useState(0) //选中的id
+    const [selectArr, setSelectArr] = useState<any>([]) //选中的省市区
+    const [cityStatus, setCityStatus] = useState(false) //城市是否存在
+    const [areaStatus, setAreaStatus] = useState(false) //区镇是否存在
+
+    const [bottomStyle, setBottomStyle] = useState({width:'100rpx',left:'0rpx'}) //底部滚动条样式
+
+    //选中内容
+    const selectItem = (item) => {
+        setSelectId(item.id)
+        if(selectIndex == 0) {
+            setSelectArr([item])
+            getCity()
+            setAreaStatus(false)
+            setCityStatus(false)
+        } else if(selectIndex == 1){
+            setSelectArr([selectArr[0], item])
+            area()
+        } else {
+            setSelectArr([selectArr[0], selectArr[1], item])
+        }
+    }
+    
+    //选中标题
+    const onSelectIndex = (index) => {
+        setSelectIndex(index)
+        const selectid = selectArr[index]?selectArr[index].id:0
+        setSelectId(selectid)
+    }
+
+    useEffect(() => {
+        if(selectIndex == 0) {
+            setList(list1)
+            // getDomDes('#address_tab_0')
+        } else if (selectIndex == 1) {
+            getCity()
+        } else {
+            area()
+        }
+    }, [selectIndex])
+
+    //获取市
+    const getCity = () => {
+        
+        setTimeout(() => {
+            if(list2.length > 0) {
+                setSelectIndex(1)
+                setList(() => { return list2 })
+                setCityStatus(true)
+                getDomDes('#address_tab_1')
+            } else {
+                setCityStatus(false)
+            }
+        },10)
+    }
+
+    //获取区
+    const area = () => {
+        // setAreaStatus(false)
+        setTimeout(() => {
+            if(list3.length > 0) {
+                setSelectIndex(2)
+                setList(() => { return list3 })
+                setAreaStatus(true)
+                getDomDes('#address_tab_2')
+            } else {
+                setAreaStatus(false)
+            }
+        },10)
+    }
+
+    //确定按钮
+    const submitSelect = () => {
+        addressOnClose?.()
+        addressOnSelect?.(selectArr)
+    }
+
+    //获取省市区宽度
+    const getDomDes = (id) => {
+        Taro.nextTick(() => {
+            let query = Taro.createSelectorQuery();
+            query.select(id).boundingClientRect(rect=>{
+                let left = rect.left;
+                let clientWidth = rect.width;
+                setBottomStyle({
+                    width: clientWidth + 'px',
+                    left: left + 'px'
+                })
+            }).exec();
+        })
+    }
+
+    //点击标题栏
+    const selectTab = (index) => {
+        onSelectIndex(index)
+        getDomDes('#address_tab_'+index)
+    }
+
+    return (
+        <>
+            <Drawer showTitle={false} show={show} onClose={() => addressOnClose?.()}>
+                <View className={styles.address_main}>
+                    <View className={styles.address_title}>
+                        <View onClick={() => addressOnClose?.()}>取消</View>
+                        <View onClick={() => submitSelect()}>确定</View>
+                    </View>
+                    <View className={styles.address_select}>
+                        <View id="address_tab_0" onClick={() => selectTab(0)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 0)})}>{selectArr[0]?selectArr[0].name:'请选择'}</View>
+                        {cityStatus&&<View id="address_tab_1" onClick={() => selectTab(1)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 1)})}>{selectArr[1]?selectArr[1].name:'请选择'}</View>}
+                        {areaStatus&&<View id="address_tab_2" onClick={() => selectTab(2)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 2)})}>{selectArr[2]?selectArr[2].name:'请选择'}</View>}
+                        <View style={bottomStyle} className={styles.bottom_index}></View>
+                    </View>
+                    <View className={styles.address_list}>
+                        <ScrollView scrollY className={styles.address_scroll}>
+                            <View className={styles.address_scroll_list}>
+                                {list.map(item => {
+                                    return (
+                                        <View onClick={() => selectItem(item)} className={classnames(styles.address_list_item, {[styles.addresst_select]:(selectId == item.id)})}>
+                                            <View className={styles.address_list_item_name}>{item.name}</View>
+                                            {(selectId == item.id)&&<View className={`iconfont icon-a-tick1 ${styles.address_iconfont}` }></View>}
+                                        </View>
+                                    )
+                                })}
+                            </View>
+                        </ScrollView>
+                    </View>
+                </View>
+            </Drawer>
+        </>
+    )
+})

src/components/infiniteScroll/index.tsx

@@ -9,12 +9,54 @@ type Params = {
     hasMore?: false|true,
     children?: ReactNode,
     lowerThresholdNum?: number,
-    paddingBottom?: number
+    selfOnScrollToUpper?:() => void
+    selfOnScroll?:(val:any) => void
+    selfOnRefresherPulling?: () => void
+    selfOnRefresherRefresh?: () => void
+    selfOnRefresherRestore?: () => void
+    selfOnRefresherAbort?: () => void
+    paddingBottom?: number,
+    refresherTriggered?: true|false,
+    refresherEnabled?: true|false
 }
-export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5, paddingBottom = 0}: Params) => {
+export default memo(({
+    styleObj, 
+    selfonScrollToLower, 
+    selfOnScrollToUpper,
+    selfOnScroll,
+    selfOnRefresherPulling,
+    selfOnRefresherRefresh,
+    selfOnRefresherRestore,
+    selfOnRefresherAbort,
+    hasMore=true, 
+    children, 
+    lowerThresholdNum = 5, 
+    paddingBottom = 0,
+    refresherTriggered = false,
+    refresherEnabled = false
+}: Params) => {
     const scrollToLower = () => {
         selfonScrollToLower?.()
     }
+    const scrollToUpper = () => {
+        selfOnScrollToUpper?.()
+    }
+    const scroll = (e) => {
+        selfOnScroll?.(e)
+    }
+    const refresherPulling = () => {
+        selfOnRefresherPulling?.()
+    }
+    const refresherRefresh = () => {
+        selfOnRefresherRefresh?.()
+    }
+    const refresherRestore = () => {
+        selfOnRefresherRestore?.()
+    }
+    const refresherAbort = () => {
+        selfOnRefresherAbort?.()
+    }
+
     return (
         <>
             <ScrollView 
@@ -22,7 +64,16 @@ export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, low
                 className={style.scroll_main} 
                 scrollY 
                 onScrollToLower={() => scrollToLower()}
+                onScrollToUpper={() => scrollToUpper()}
+                onScroll={(e) => scroll(e)}
                 lowerThreshold={lowerThresholdNum}
+                refresherEnabled = {refresherEnabled}
+                refresherTriggered = {refresherTriggered}
+                onRefresherPulling = {() => refresherPulling()}
+                onRefresherRefresh = {() => refresherRefresh()}
+                onRefresherRestore = {() => refresherRestore()}
+                onRefresherAbort = {() => refresherAbort()}
+                refresherBackground ='#ccc'
             >
                 <View style={{paddingBottom:paddingBottom + 'rpx'}}>
                     {children}

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-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
-                background: linear-gradient(to right, #fff 30%, rgba(255,255,255, 0.3) );
                 // 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}>