|
|
@@ -2,8 +2,19 @@
|
|
|
// import Image from "next/image";
|
|
|
import React, { useState, useEffect, useRef, useCallback } from "react";
|
|
|
|
|
|
+interface ListDates {
|
|
|
+ id: number;
|
|
|
+ points: string;
|
|
|
+ title: string;
|
|
|
+ type: string;
|
|
|
+ // desc: string;
|
|
|
+ date: string;
|
|
|
+ // createTime: string;
|
|
|
+ currentPoints: string;
|
|
|
+ // 你自己加字段...
|
|
|
+}
|
|
|
// 模拟积分明细数据(可替换为接口请求)
|
|
|
-const mockPointsData = [
|
|
|
+const mockPointsData: ListDates[] = [
|
|
|
{
|
|
|
id: 1,
|
|
|
type: "rewarded",
|
|
|
@@ -118,22 +129,15 @@ const mockPointsData = [
|
|
|
currentPoints: "My points:101240",
|
|
|
},
|
|
|
];
|
|
|
-interface ListDates {
|
|
|
- id: number;
|
|
|
- points: number;
|
|
|
- type: string;
|
|
|
- desc: string;
|
|
|
- createTime: string;
|
|
|
- // 你自己加字段...
|
|
|
-}
|
|
|
+
|
|
|
const PointsDetails = () => {
|
|
|
// 状态管理
|
|
|
const [activeTab, setActiveTab] = useState("all"); // 激活标签:all/rewarded/used
|
|
|
- const [listData, setListData] = useState([]); // 展示的列表数据
|
|
|
+ const [listData, setListData] = useState<ListDates[]>([]); // 展示的列表数据
|
|
|
const [page, setPage] = useState(1); // 当前页码
|
|
|
const [loading, setLoading] = useState(false); // 加载状态
|
|
|
const [hasMore, setHasMore] = useState(true); // 是否有更多数据
|
|
|
- const listRef = useRef(null); // 列表容器ref,用于监听滚动
|
|
|
+ const listRef = useRef<HTMLDivElement>(null); // 列表容器ref,用于监听滚动
|
|
|
|
|
|
// 每页展示12条
|
|
|
const PAGE_SIZE = 12;
|
|
|
@@ -191,7 +195,7 @@ const PointsDetails = () => {
|
|
|
if (loading || !hasMore) return;
|
|
|
const container = listRef.current;
|
|
|
// 滚动到底部的判断:滚动高度 + 可视高度 ≥ 总高度 - 20(阈值)
|
|
|
- if (
|
|
|
+ if (container &&
|
|
|
container.scrollTop + container.clientHeight >=
|
|
|
container.scrollHeight - 20
|
|
|
) {
|