72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { CommonEventFunction } from "@tarojs/components";
|
|
import { useCallback, useState } from "react";
|
|
|
|
export interface refresherConfig {
|
|
refresherEnabled: boolean;
|
|
refresherThreshold?: number;
|
|
refresherDefaultStyle?: "black" | "white" | "none" | string;
|
|
refresherBackground?: string;
|
|
onRefresherPulling?: CommonEventFunction;
|
|
onRefresherRefresh?: CommonEventFunction;
|
|
onRefresherRestore?: CommonEventFunction;
|
|
onRefresherAbort?: CommonEventFunction;
|
|
}
|
|
|
|
// 下拉刷新
|
|
export const useRefresherConfig = ({
|
|
onRefresherRefresh,
|
|
...safeConfig
|
|
}: refresherConfig) => {
|
|
const [refresherTriggered, setRefresherTriggered] = useState(false);
|
|
|
|
const handleRefresh = useCallback(
|
|
async (event) => {
|
|
setRefresherTriggered(true);
|
|
onRefresherRefresh?.(event);
|
|
await new Promise((resolve) => setTimeout(resolve, 400));
|
|
setRefresherTriggered(false);
|
|
},
|
|
[onRefresherRefresh, setRefresherTriggered],
|
|
);
|
|
|
|
return {
|
|
refresherThreshold: 45,
|
|
refresherDefaultStyle: "none",
|
|
refresherBackground: "transparent",
|
|
refresherTriggered: refresherTriggered,
|
|
onRefresherRefresh: handleRefresh,
|
|
...safeConfig,
|
|
};
|
|
};
|
|
|
|
export interface loadMoreConfig {
|
|
onScrollToLower: CommonEventFunction;
|
|
threshold?: number; // 距离底部触发加载
|
|
hasMore?: boolean; // 是否还有更多
|
|
}
|
|
// 上拉加载更多
|
|
export const useLoadMoreConfig = ({
|
|
onScrollToLower,
|
|
threshold = 50,
|
|
hasMore = true,
|
|
}: loadMoreConfig) => {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleScrollToLower: CommonEventFunction = useCallback(
|
|
async (event) => {
|
|
if (isLoading || !hasMore) return;
|
|
setIsLoading(true);
|
|
onScrollToLower(event);
|
|
setIsLoading(false);
|
|
},
|
|
[isLoading, hasMore, onScrollToLower],
|
|
);
|
|
|
|
return {
|
|
lowerThreshold: threshold,
|
|
hasMore: hasMore,
|
|
isLoading: isLoading,
|
|
onScrollToLower: handleScrollToLower,
|
|
};
|
|
};
|