[英]pagination when using Array.splice
我正在向我的应用程序呈现卡片列表。 共有 13 个。 我需要每页显示 3 个,然后我有一个按钮,可以单击该按钮移动到下一个 3 个,依此类推直到结束。 我正在使用 Array.splice 方法来显示卡片。 第一个页面的参数是 0 和 3( props.trucks.slice(0, 3)
)。 对于第二页,它应该是 3 和 6( props.trucks.slice(3, 6)
)。 单击下一页按钮应遵循该模式,直到卡片用完为止。 我怎样才能做到这一点?
到目前为止,我快到了,但我还没有想出如何在我到达卡片末尾时阻止该功能继续。 下面splitJump
中的代码将显示最后一张卡片。 然后,如果我单击下一步,它不会显示任何内容,然后如果我再次单击它,它会再次显示最后一张卡片。
这是相关的代码:
const [spliceParams, setSpliceParams] = useState({
spliceStart: 0,
spliceEnd: 3
})
const spliceJump = () => {
if (spliceParams.spliceStart >= props.trucks.length) {
setSpliceParams({
spliceStart: props.trucks.length - 1,
spliceEnd: spliceParams.spliceStart + 3
})
} else {
setSpliceParams({
spliceStart: spliceParams.spliceStart + 3,
spliceEnd: spliceParams.spliceEnd + 3
})
}
}
const spliceReverse = () => {
setSpliceParams({
spliceStart: spliceParams.spliceStart - 3,
spliceEnd: spliceParams.spliceEnd - 3
})
}
{!props.cuisineTypeMode && <div className="card-div">
<div className="card-sub-div">
<div className="trucks-category-div">
<h3 className="trucks-category">Nearby Trucks</h3>
<p>View all</p>
<div className="category-pagination-arrows">
<div className="arrow-bg-div">
<i class="fas fa-arrow-left" onClick={spliceReverse}></i>
</div>
<div className="arrow-bg-div">
<i class="fas fa-arrow-right" onClick={spliceJump}></i>
</div>
</div>
</div>
<div className="trucks-div">
{props.trucks && (props.trucks).slice(spliceParams.spliceStart, spliceParams.spliceEnd).map(truck => (
<Card className="truck-card" onClick={() => selectTruck(truck.id)}>
<CardActionArea>
<CardMedia
className="truck-img"
image={truck.image}
style={{ width: '100%' }}
/>
<i
className="like-icon"
class={filterThroughFavs(truck.id).length > 0 ? "fas fa-heart" : "far fa-heart"}
onClick={filterThroughFavs(truck.id).length > 0 ? e => removeFromFavorites(e, truck.id) : e => addToFavs(e, truck.id)}
/>
<CardContent>
<Typography className="truck-name" gutterBottom variant="h5" component="h2">
{truck.name}
</Typography>
<Typography>
{truck.avg_rating}
</Typography>
<Typography className="cuisine-type" component="h3">{truck.cuisine_type}</Typography>
<Typography className="distance-plus-rating" component="h3">
{truckDistance[truck.index]}
{/* {console.log(`props.location: ${props.location}, truck.current_location: ${truck.current_location}, returns: ${getTruckDistance(props.location, truck.current_location)}`)}
{console.log(getTruckDistance(props.location, truck.current_location))} */}
</Typography>
</CardContent>
</CardActionArea>
</Card>
))}
</div>
</div>
</div>}
示例代码,您可以相应地增强。
class Products {
constructor() {
this.state.currentIndex = 0;
this.noOfElement = 3
}
onNext() {
const currentIndex = Math.min(this.state.currentIndex + this.noOfElement, props.trucks.length)
this.setState({
currentIndex
})
}
onPrev() {
const currentIndex = Math.max(this.state.currentIndex - this.noOfElement, 0)
this.setState({
currentIndex
})
}
render() {
return (<div className="trucks-div">
{props.trucks && (props.trucks).slice(this.state.currentIndex, this.state.currentIndex + this.noOfElement).map(truck => (
<Card className="truck-card" onClick={() => selectTruck(truck.id)}>
</Card>
))}
</div>)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.