我正在使用React构建一个体育网站，我正在从体育API - API-Football接收数据。我有一个赛程页面，根据联赛ID显示特定联赛的赛程。所以，我想要的是以这种方式显示数据-英语联赛。
查看如何只有当用户向上滚动时才能访问已完成的灯具，而尚未启动的灯具在用户屏幕上可见，并且当用户向下滚动时可以访问更多尚未启动的灯具。
我正在从API接收对象数组。这是我从API接收到的一个对象的示例-
{
"fixture": {
"id": 867946,
"referee": "Anthony Taylor, England",
"timezone": "Asia/Calcutta",
"date": "2022-08-06T00:30:00+05:30",
"timestamp": 1659726000,
"periods": {
"first": 1659726000,
"second": 1659729600
},
"venue": {
"id": 525,
"name": "Selhurst Park",
"city": "London"
},
"status": {
"long": "Match Finished",
"short": "FT",
"elapsed": 90
}
},
"league": {
"id": 39,
"name": "Premier League",
"country": "England",
"logo": "https://media-1.api-sports.io/football/leagues/39.png",
"flag": "https://media-3.api-sports.io/flags/gb.svg",
"season": 2022,
"round": "Regular Season - 1"
},
"teams": {
"home": {
"id": 52,
"name": "Crystal Palace",
"logo": "https://media-3.api-sports.io/football/teams/52.png",
"winner": false
},
"away": {
"id": 42,
"name": "Arsenal",
"logo": "https://media-1.api-sports.io/football/teams/42.png",
"winner": true
}
},
"goals": {
"home": 0,
"away": 2
},
"score": {
"halftime": {
"home": 0,
"away": 1
},
"fulltime": {
"home": 0,
"away": 2
},
"extratime": {
"home": null,
"away": null
},
"penalty": {
"home": null,
"away": null
}
}
}有人能帮帮我吗？
1条答案
按热度按时间ilmyapht1#
这里我推荐使用refs（使用函数组件，使用
useRef钩子，hook references）。对于每个fixture，您可以为组件指定一个给定的引用（假设每个fixture都Map到自己的组件）。如果夹具按完成度排序，则记录第一个未完成的夹具，或相反记录最后一个完成的夹具。如果使用第一个不完整的fixture，可以调整父组件的scrollTop，以匹配不完整fixture的客户端边界rect的top--这可以使用{ref}.current.getClientBoundingRect()、getClientBoundingRect reference来获取。以类似的方式，如果您决定使用最后完成的fixture，您可以将客户端边界rect的bottom属性分配给父节点的scrollTop。