Блог

Главная - Вопросы по программированию - Vuetify нижняя навигация недоступна после прокрутки, а затем изменения маршрута

Vuetify нижняя навигация недоступна после прокрутки, а затем изменения маршрута

#vuejs2 #vuetify.js #vue-router

Вопрос:

У меня возникли проблемы с v-bottom-navigation hide-on-scroll изменением маршрута. Если я нахожусь на маршруте с прокручиваемым контентом и прокручиваю его вниз, а затем вверх, он работает так, как ожидалось — нижняя навигация скрыта. Затем при изменении маршрута на страницу без прокручиваемого содержимого нижняя навигационная панель становится недоступной. Нет очевидного способа сбросить tranform hide-on-scroll установленный стиль, кроме как перейти на страницу с прокручиваемым содержимым, а затем прокрутить вниз.

Репро: Кодовый код

  1. прокрутите страницу 1 до нижней части, затем прокрутите вверх (нижняя навигация переключена).
  2. переход на страницу 2 (кнопка «гамбургер»)
  3. Навигационная система перемещается за пределы экрана
 <v-main>
  <v-container fluid>
    <v-fade-transition mode="out-in">
      <router-view></router-view>
    </v-fade-transition>
  </v-container>
</v-main>
<v-bottom-navigation
  hide-on-scroll
  grow
  app
>...</v-bottom-navigation>

Спасибо.

Комментарии:

1. Как насчет v-model включения v-bottom-navigation и установки значения true при изменении маршрута?

2. Это не сработало . Мне нужно переопределить стиль: transform: translateY(100%); это hide-on-scroll применимо. Но как это сделать при смене маршрута?

Ответ №1:

Спасибо Кэлу в канале Vuetify discord #помощь в решении: используйте :input-value.sync , чтобы открыть его при изменении маршрута.

     <v-bottom-navigation
      :input-value.sync="bottomNav"
      hide-on-scroll
      grow
      app
    >
 
   watch: {
    '$route.path' () {
      this.bottomNav = true
    }
Метки: ,