Навигация по коллекциям и скролл

Действия на этой странице переключают текущий элемент и управляют скроллом в gallery, pager и tabs.

Переключение элементов

Для навигации внутри gallery, pager и tabs укажите действие:

  • set_current_item — для текущего элемента;
  • set_next_item — для следующего элемента;
  • set_previous_item — для предыдущего элемента.
div-action://set_current_item?id=<div_id>&item=<item_index>
div-action://set_next_item?id=<div_id>&overflow=<clamp|ring>
div-action://set_previous_item?id=<div_id>&overflow=<clamp|ring>

Параметр

Описание

id

Идентификатор элемента, в котором нужно переключить текущий.

item

Номер элемента, до которого необходимо проскроллить.

overflow

Указывает, как будет происходить навигация при достижении граничных элементов:

  • clamp — переход остановится на граничном элементе (значение по умолчанию);
  • ring — произойдет переход в начало или конец в зависимости от текущего элемента.

Для перехода в начало или конец gallery укажите действие:

div-action://scroll_to_start?id=<div_id>
div-action://scroll_to_end?id=<div_id>

Параметр

Описание

id

Идентификатор элемента, в котором нужно переключить текущий.

Если элементы внутри gallery будут больше, чем размер галлереи, то действие scroll_to_end проскроллит ее до конца последнего элемента.

Для скролла gallery вперед или назад укажите действие:

div-action://scroll_forward?id=<div_id>&step=<dp_count>&overflow=<clamp|ring>
div-action://scroll_backward?id=<div_id>&step=<dp_count>&overflow=<clamp|ring>

Для скролла gallery к конкретному значению dp укажите действие:

div-action://scroll_to_position?id=<div_id>&step=<dp_count>

Параметр

Описание

id

Идентификатор элемента, в котором нужно переключить текущий.

step

Позиция в единицах dp, до которой нужно проскроллить или на сколько нужно проскроллить галерею, в зависимости от действия.

overflow

Указывает, как будет происходить навигация при достижении граничных элементов:

  • clamp — переход остановится на граничном элементе (значение по умолчанию);
  • ring — произойдет переход в начало или конец в зависимости от текущего элемента.

Типизированные действия scroll_to и scroll_by

Те же переходы можно описать типизированными действиями scroll_to и scroll_by. У обоих есть параметры id (идентификатор элемента, в котором выполняется скролл), animated (включает анимацию, по умолчанию true) и duration.

Действие scroll_to переходит к точке, заданной в параметре destination:

Значение type

Описание

index

Элемент с индексом, указанным в value.

item_id

Дочерний элемент с идентификатором, указанным в value. Поддерживается на Android и в Web.

offset

Позиция в dp от начала контейнера, указанная в value. Применимо только в gallery.

start

Начало контейнера.

end

Конец контейнера.

Действие scroll_by пролистывает контейнер от текущей позиции на item_count элементов или на offset dp (только в gallery). Отрицательные значения пролистывают назад. Параметр overflow задает поведение на границе контейнера: clamp (по умолчанию) или ring.

Длительность скролла

В типизированных действиях scroll_to и scroll_by параметр duration задает длительность анимации в миллисекундах. Значение должно быть целым неотрицательным числом. Без duration используется стандартная анимация платформы; при duration: 0 или animated: false скролл выполняется мгновенно.

Например, переход к третьему элементу галереи за 500 мс:

{
  "log_id": "scroll_to_item",
  "typed": {
    "type": "scroll_to",
    "id": "my_gallery",
    "destination": {"type": "index", "value": 2},
    "duration": 500
  }
}

Для перехода относительно текущего элемента используйте scroll_by с item_count. Например, на одну страницу вперед без анимации:

{
  "log_id": "scroll_by_instant",
  "typed": {
    "type": "scroll_by",
    "id": "my_pager",
    "item_count": 1,
    "duration": 0
  }
}

Многостраничный скролл в pager

Установите multi_page_scroll: true, чтобы скроллить несколько страниц pager одним свайпом. По умолчанию значение равно false. Параметр не влияет на программный скролл. Для циклического скролла включите также infinite_scroll.

{
  "type": "pager",
  "id": "multi_page_pager",
  "layout_mode": {
    "type": "fixed",
    "neighbour_page_width": {
      "type": "fixed",
      "value": 0
    }
  },
  "multi_page_scroll": true,
  "infinite_scroll": true,
  "items": [
    {
      "type": "text",
      "text": "Страница 1"
    },
    {
      "type": "text",
      "text": "Страница 2"
    },
    {
      "type": "text",
      "text": "Страница 3"
    }
  ]
}

Узнать больше

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit

Предыдущая
Действия видимости
Следующая
Дозагрузка данных и патчи