нумерация страниц при использовании Array.splice - PullRequest
Новая
       7

нумерация страниц при использовании Array.splice

0 голосов
/ 01 апреля 2020

Я отображаю список карт в моем приложении. Всего их 13. Мне нужно показать их по 3 на страницу, а затем у меня есть кнопка, которую можно нажать, чтобы перейти к следующим 3, и так далее, и так далее до конца. Я использую метод Array.splice, чтобы показать карты. Параметры для первой страницы: 0 и 3 (props.trucks.slice(0, 3)). Для второй страницы должно быть 3 и 6 (props.trucks.slice(3, 6)). Нажатие кнопки «Следующая страница» должно следовать этому шаблону до тех пор, пока карточки не будут исчерпаны. Как я могу выполнить sh это ??

Обновление:

На данный момент я почти на месте, но я не понял, как остановить функцию, чтобы продолжить, как только я получаю до конца карты. Код в 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>}

enter image description here

1 Ответ

1 голос
/ 01 апреля 2020

Пример кода, Вы можете улучшить соответственно. 

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>)
  }
}
...