时间戳

首页 > 解决方案 > 滚动时Vuetify选项卡变为活动状态

javascript - 滚动时Vuetify选项卡变为活动状态

问题描述

我已经使用vue-scrollto实现了 vuetify 选项卡，当您单击选项卡时，它会滚动到某个位置。

       <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/

标签： javascriptvue.jsvuetify.jsvuetify-tabs

解决方案

通过组合href选项卡的属性和交叉点观察者，您可以完成此操作。

这是一个基本但有效的笔：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>

此 intersect 包装器调用用户定义的方法（在本例中为handleIntersect）来更新选项卡：

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

对于您的用例，可能会根据其视口位置更改选项卡的每个项目都需要使用要设置的选项卡的参数调用给定函数。这与这支 Pen 目前的位置相差不大。

注意：我从未使用过 IntersectionObserver 并且我不确定是否isIntersecting是检测视口中是否存在元素的最佳方法，因此在生产代码中实现它之前，请先进行自己的研究和测试 :)

推荐阅读