@zlodiak

Как прокручивать меню?

Есть горизонтальное меню, которое состоит из нескольких кнопочек. Я поместил его в контейнер ограниченной высоты и длины. Часть этих кнопочек выходит за пределы контейнера и обрезается.

LIVE DEMO

Помогите пожалуйста сделать так чтобы меню прокручивалось влево при свайпе влево по нему и прокручивалось вправо при свайпе вправо по нему. Событие свайпа я уже реализовал на показанном выше примере(см. вывод консоли).

Важно то, что у контейнера, который вмещает кнопочки меню длина не задана жёстко, а задана при помощи max-width.

html:
<span
  class="wrap"
  fxFlex="1 1 auto"
  fxLayoutGap="5px"
  (swipe)="onSwipe($event)"
>
  <button>
    my_beauty_button1
  </button>

  <button>
    my_beauty_button2
  </button>

  <button>
    my_beauty_button3
  </button>

  <button>
    my_beauty_button4
  </button>

  <button>
    my_beauty_button5
  </button>

  <button>
    my_beauty_button6
  </button>

  <button>
    my_beauty_button7
  </button>
</span>


css:
.wrap {
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  background: yellow;
  height: 26px;

  box-sizing: border-box;
  flex: 1 1 auto;
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
}


js:
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
})
export class AppComponent  {
  eventText = '';

  onSwipe(evt) {
      const x = Math.abs(evt.deltaX) > 40 ? (evt.deltaX > 0 ? 'right' : 'left'):'';

      console.log('swipe:', x)
  }
}
  • Вопрос задан
  • 89 просмотров
Пригласить эксперта
Ответы на вопрос 3
Xuxicheta
@Xuxicheta Куратор тега Angular
инженер
Определить ширину контейнера в ngAfterViewInit
При свайпе выставлять transform: translateX(ширина * индекс) с помощью Renderer2
Анимацию на transform в стили.
Ответ написан
... может есть смысл взять какой нибудь готовый слайдер и запихать меню в его логику взаимодействия с юзером?
Ответ написан
StepanTur
@StepanTur
Web frontend/backends Калининград
owerflow:scroll
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы