4

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

4

2 回答 2

5

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

于 2020-01-17T14:46:49.333 回答
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，并且使用 $vuetify.goTo() 滚动到所需的 div （更多在这里 - 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>

在上面的 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 函数中，我检测到视图中的 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

干杯!

于 2021-09-18T09:44:09.630 回答