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

Question

我已经使用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/

Answer 1

通过组合href选项卡的属性和交集观察器，您可以实现此目的。

这是一个基本但有效的笔：https ://codepen.io/Qumez/pen/VwYEapg

实际上，我们在这里所做的就是为每个标签分配一个锚点，并将其绑定到数据属性。然后，我们使用 Vuetify 的包装器在页面底部有一个带有交叉观察器的跨度v-intersect：

<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是检测视口中元素存在的最佳方法，因此在生产代码中实现此功能之前，请先进行自己的研究和测试:)