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/

- Fabio Venturi Pastor

---

您可以使用IntersectionObserver API（https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API）或`onScroll`事件（https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll）。 - IVO GELOV

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"
            }
        }

对于您的使用情况，也许每个可能基于其视口位置更改选项卡的项目都需要调用给定函数，并提供一个参数来设置选项卡。这与此处的Pen当前状态相比并不太难实现。

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

- Tanner

Answer 2

这是我成功实现的方法，而没有使用像vue-scrollto这样的外部库。

选项卡 -

<v-tabs vertical v-model="tab_selected" >
      <span v-for="(category, index) in categories" :key="index">
        <v-tab @click="$vuetify.goTo('#sec_'+index)" class="nav_tab">
          {{category.name}}
        </v-tab>
      </span>

    </v-tabs> 

在这里，我已经将选项卡的选择绑定到一个v-model，并且滚动到所需div的位置使用了$ vuetify.goTo（更多内容请参见此处- https://vuetifyjs.com/en/features/scrolling/ ）

可滚动内容包含在自由流动的div中-

<div v-for="(category, index) in categories" :key="index">
        <v-card :id="'sec_'+index" class="card-shadow mb-10">
          <span :id="'span_'+index" v-intersect="handleIntersect"></span>
          ...
        </v-card>
      </div>

在上述情况中，标签和可滚动内容分别位于col-4和col-8中。

这里有两个部分。点击选项卡时，div应该滚动到正确的内容位置。这由 $vuetify.goTo() 处理。第二个是在滚动内容div时，应选择相关的选项卡。这由 v-intersect 指令处理。（详见此处 - https://vuetifyjs.com/en/directives/intersect/）

<span :id="'span_'+index" v-intersect="handleIntersect"></span>

当所述的span进入或离开视图时，handleIntent函数将触发。在handleIntent函数中，我检测处于视图中的span的索引，然后通过v-model激活选项卡。

handleIntersect(entries, observer){
  let intersecting_element = entries[0]
  if(intersecting_element.isIntersecting){
    let id = intersecting_element.target.id
    let index = Number(id.split("_")[1])
    this.tab_selected = index
  }
}

这是它的外观 - https://gyazo.com/388550a03d66e086d7dc00b646264806

干杯！

- Bharat Nadkarni