109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
import { ScrollView, View } from "@tarojs/components"
|
||
import { memo, ReactNode, useState } from "react"
|
||
import style from "./index.module.scss"
|
||
import DotLoading from "@/components/dotLoading"
|
||
import LoadingCard from "../loadingCard"
|
||
|
||
export type StatusParam = 0|1|2|3
|
||
|
||
type Params = {
|
||
styleObj?: Object,
|
||
selfonScrollToLower?: () => void,
|
||
hasMore?: false|true,
|
||
moreStatus?: false|true,
|
||
statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
|
||
children?: ReactNode,
|
||
lowerThresholdNum?: 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,
|
||
selfOnScrollToUpper,
|
||
selfOnScroll,
|
||
selfOnRefresherPulling,
|
||
selfOnRefresherRefresh,
|
||
selfOnRefresherRestore,
|
||
selfOnRefresherAbort,
|
||
hasMore=true,
|
||
children,
|
||
lowerThresholdNum = 5,
|
||
paddingBottom = 0,
|
||
refresherTriggered = false,
|
||
refresherEnabled = false,
|
||
moreStatus = true,
|
||
statusMore = 0
|
||
}: 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
|
||
style={styleObj}
|
||
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 ='#F8F8F8'
|
||
>
|
||
{!moreStatus&&<>
|
||
<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
|
||
{children}
|
||
</View>
|
||
</>||
|
||
<>
|
||
{(statusMore == 2 || statusMore == 3)&&<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
|
||
{children}
|
||
<View className={style.infinite_scroll}>
|
||
{
|
||
(statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>||
|
||
<View className={style.noMore}>没有更多数据了</View>
|
||
}
|
||
</View>
|
||
</View>
|
||
}
|
||
{(statusMore == 0)&&<LoadingCard/>}
|
||
{(statusMore == 1)&&<LoadingCard loadingIcon={false} title="暂无数据"/>}
|
||
</>}
|
||
|
||
<View className="common_safe_area_y"></View>
|
||
</ScrollView>
|
||
</>
|
||
)
|
||
}) |