Vuetify 标签在滚动时变为活动状态

Question

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

所以我现在想要实现的是，滚动时活动选项卡会根据位置发生变化。

我已经搜索了好几天了，什么也没找到。 documentation

有没有不用JQuery的方法？

JQuery 的结果示例： http://jsfiddle.net/cse_tushar/Dxtyu/141/

Answer 1

通过结合选项卡的 href 属性和 intersection observer，您可以完成此操作。

这是一支简陋但有效的钢笔：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 是否是检测视口中元素存在的最佳方式，所以请这样做在生产代码中实现它之前你自己的研究和测试:)

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 模型，并使用 $vuetify.goTo() 滚动到所需的 div（此处有更多内容 - https://vuetifyjs.com/en/features/scrolling/）

Scrollable 内容自由流动 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>

在上面的 scanario 中，选项卡和可滚动内容分别保存在 col-4 和 col-8 中。

这有两个部分。单击选项卡时，div 应滚动到正确的内容。这是由 $vuetify.goTo() 处理的。第二个是滚动内容 div，应选择相关选项卡。这是由 v-intersect 指令处理的。（更多信息 - https://vuetifyjs.com/en/directives/intersect/）

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

handleIntent 函数将在所述跨度在视图内和视图外时触发。在 handleIntent 函数中，我检测到视图中的跨度索引，然后通过 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

干杯！

Vuetify 标签在滚动时变为活动状态

Vuetify Tabs change active when scroll

javascript

vue.js

vuetify.js

vuetify-tabs