Vuetify вкладки изменяются при прокрутке - PullRequest
Новая
       28

Vuetify вкладки изменяются при прокрутке

0 голосов
/ 17 января 2020

У меня есть вкладки vuetify, реализованные с помощью vue -scrollto , что при нажатии на вкладку она прокручивается до позиции. 

       <v-tabs
          centered
          grow
          color="#009EE2"
        >
          <div class="slider-background" />
          <v-tabs-slider />

          <v-tooltip
            bottom
            v-for="(tab, key) in tabs"
            :key="key"
            color="#009EE2"
          >
            <template v-slot:activator="{on}">
              <v-tab
                v-on="on"
                v-scroll-to="{
                  el: tab.scrollTo,
                  container: scrollContainer,
                  duration: 300,
                  easing: 'linear',
                  offset: -120,
                  force: true,
                  cancelable:true
                }"
              >
                <v-icon v-text="tab.icon" />
              </v-tab>
            </template>
            <div class="v-tooltip-arrow" />
            <span>
              {{ $t(tab.tooltipText) }}
            </span>
          </v-tooltip>
        </v-tabs>

Итак, чего я хочу добиться сейчас, так это того, что при прокрутке активная вкладка меняется в зависимости от позиции.

Я искал несколько дней и ничего не нашел. документация

Есть ли способ без использования JQuery?

Пример результата с JQuery: http://jsfiddle.net/cse_tushar/Dxtyu/141/

1 Ответ

1 голос
/ 17 января 2020

Объединив атрибут href для вкладок и наблюдателя пересечения , вы можете выполнить sh this.

Вот элементарное, но работающее перо: https://codepen.io/Qumez/pen/VwYEapg

По сути, мы делаем здесь привязку к каждому тегу и привязываем его к свойству данных. Затем у нас есть промежуток в нижней части страницы с наблюдателем пересечения, с использованием оболочки v-intersect Vuetify: 

<span v-intersect ="handleIntersect">Page will automatically scroll to tab-3 when this span is in view</span>

Эта оболочка пересечения вызывает пользовательский метод (в данном случае handleIntersect ), чтобы обновить вкладку: 

        handleIntersect(entries, observer) {
            if(entries[0].isIntersecting) {
                this.tab = "tab-3"
            }
            else {
                this.tab = "tab-1"
            }
        }

Для вашего случая использования, возможно, каждый элемент, который будет изменять вкладку в зависимости от ее положения в области просмотра, должен будет вызывать данную функцию с аргументом для какую вкладку установить. Это не так уж далеко от того места, где сейчас находится это перо.

Примечание: Я никогда не использовал IntersectionObserver, и я не уверен, является ли isIntersecting лучшим способом обнаружения существование элемента в окне просмотра, поэтому проведите собственное исследование и тестирование, прежде чем внедрять это в производственный код

...