95 lines
3.0 KiB
TypeScript
95 lines
3.0 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"
|
|
|
|
type Params = {
|
|
styleObj?: Object,
|
|
selfonScrollToLower?: () => void,
|
|
hasMore?: false|true,
|
|
moreStatus?: false|true,
|
|
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
|
|
}: 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'
|
|
>
|
|
<View style={{paddingBottom:paddingBottom + 'rpx'}}>
|
|
{children}
|
|
{moreStatus&&<View className={style.infinite_scroll}>
|
|
{
|
|
hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
|
|
<View>没有更多数据了</View>
|
|
}
|
|
</View>}
|
|
</View>
|
|
|
|
<View className="common_safe_area_y"></View>
|
|
</ScrollView>
|
|
|
|
</>
|
|
)
|
|
}) |