taro/src/_health/components/sticky_date_list.tsx

import { MainColorType } from "@/context/themes/color";
import { rpxToPx } from "@/utils/tools";
import { ScrollView, View } from "@tarojs/components";

export default function StickyDateList(props: {
    header?: any, children: any, footer?: any,
    onRefresherRefresh: any,
    isPulling: boolean,
    loadMore?: any,
    onScroll: any,
    showDate: boolean,
    date: string,
    disable?: boolean,
}) {

    function headerDate() {
        if (global.language == 'en') {
            return props.date.substring(0, 4)
        }
        return props.date.substring(0, 5)
    }

    return <View style={{ position: 'relative' }}>
        <View className="h26" style={{
            position: 'absolute',
            left: 0,
            top: 0,
            right: 0,
            height: props.showDate ? rpxToPx(84) : 0,
            backgroundColor: '#f5f5f5',
            paddingLeft: rpxToPx(40),
            display: 'flex',
            boxSizing: 'border-box',
            flexDirection: 'row',
            alignItems: 'center',
            zIndex: 1,
            opacity: props.showDate ? 1 : 0,
            color: MainColorType.g01
        }}>{headerDate()}
            <View className="border_header_line" />
            <View className="border_footer_line" />
        </View>
        <ScrollView style='height:100vh'
            enableBackToTop
            scrollY={!props.disable}
            refresherEnabled
            upperThreshold={70}
            lowerThreshold={80}
            refresherBackground={MainColorType.g05}
            onRefresherRefresh={props.onRefresherRefresh}
            refresherTriggered={props.isPulling}
            onScroll={props.onScroll}
            onScrollToLower={props.loadMore}
        >
            {
                props.header
            }
            {
                props.children
            }
            {
                props.footer
            }
        </ScrollView>
    </View>
}