Использование ионных слайдов в качестве материала скользящих вкладок - PullRequest
Новая
       7

Использование ионных слайдов в качестве материала скользящих вкладок

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

Я пытаюсь реализовать популярные скользящие вкладки Material Design в проекте Ioni c 4. Вот как я это делаю:

  1. Я использую слайды полной ширины и полной высоты, чтобы имитировать c страницу
  2. Я использую <ion-segment-button> s внутри <ion-segment> в верхней части страницы в качестве метки страницы.
  3. Чтобы имитировать c скользящего индикатора, я удалил активный по умолчанию индикатор ion-segment-button и заменил его на span. Я использую событие ionSlideDrag, чтобы определить ход слайда, затем использую это значение, чтобы обновить стиль span, в частности свойство left, чтобы показать движение индикатора при перетаскивании слайда.

Все работает довольно хорошо, кроме части # 3, которая вызывает серьезные проблемы с производительностью. Это вызывает лаги и причудливую анимацию при перемещении вкладки из-за частых обновлений в DOM, когда я обновляю свойство left span. Я попытался использовать DomController.write() и [ngStyle], оба из которых одинаково ужасно справляются с этой задачей.

Поэтому у меня вопрос, как я могу повысить производительность взломанных вкладок Design Material? Есть ли лучший способ реализовать эту функцию в Ioni c 4, поскольку она была причудливо опущена в начале Ioni c Framework?

...