检测 Vuetify 幻灯片外观答案

【问题标题】：detect the vuetify slide appearance检测 Vuetify 幻灯片外观
【发布时间】：2021-09-12 17:33:37
【问题描述】：

我正在使用 vuetify 幻灯片组，我需要以编程方式识别完全和部分显示的幻灯片。

所以根据上图，幻灯片 0 和幻灯片 1 完全显示，幻灯片 2 部分显示。我的初始代码如下。

<v-slide-group>
  <v-slide-item v-for="(slide, i) in slides" :key="i">
    <v-card width="500" height="200" color="yellow">
        slide {{i}}
    </v-card>
  </v-slide-item>
</v-slide-group>

 data() {
   return {
     slides: [1, 2, 3, 4, 5],
   };
 },

我的最终目的是为部分显示的幻灯片（幻灯片 2）应用一个类，并将另一个类应用于完全显示的幻灯片（幻灯片 0 和幻灯片 1）。这里主要麻烦的是识别部分显示的幻灯片和完全显示的幻灯片。有什么方法可以实现吗？

【问题讨论】：

我在几个项目中遇到过你的问题，但我无法解决，最后决定使用vue-awesome-swiper，它是 vuejs 的现成 swiper 组件。

标签： vue.js vuetify.js

【解决方案1】：

您可以使用基于intersection Observer API 工作的vuetify's intersect directive。

在要检测其与视口相交的元素上使用v-intersect。然后将一个对象传递给该指令，该指令具有一个 handler 键，该键包含一个您希望在每次交集检测到元素可见性时调用的函数。

您应该有一个threshold: 1.0，它表示在每个像素都可见之前不会认为阈值已通过。这样您就可以区分完全可见的卡片和部分可见的卡片。

在处理程序函数中，您可以访问entries，它保存有关entries[0] 中相交元素的不同信息，例如检测到的target 元素和当元素通过要求时为真的isIntersecting 布尔值你设置阈值等，否则为假。

下面的代码演示了这种方法。在onIntersect 方法中，它根据isIntersecting 值向元素添加或删除一些css类，这是获得的结果：

如果您运行下面的演示，请单击Full Page 按钮以查看整页效果，由于某些奇怪的原因，它不会在小演示区域中显示效果。上图是此演示代码在Full Page 模式下的屏幕截图。

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    slides: [1, 2, 3, 4, 5, 6, 7, 8],
  },
  methods: {
    onIntersect(entries) {
      const src = entries[0];
      const target = src.target;
      const isIntersecting = src.isIntersecting;
      if (isIntersecting) {
        target.classList.remove('bg--yellow');
        target.classList.add('bg--blue');
      } else {
        target.classList.remove('bg--blue');
        target.classList.add('bg--yellow');
      }
    }
  },
})

.bg--blue {
  background-color: blue !important;
}

.bg--yellow {
  background-color: yellow !important;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-slide-group show-arrows>
          <v-slide-item v-for="(slide, i) in slides" :key="i">
            <v-card width="300" height="200" v-intersect="{
              handler: onIntersect,
              options: {
                threshold: 1.0
              }
            }">
              slide {{i}}
            </v-card>
          </v-slide-item>
        </v-slide-group>
      </v-container>
    </v-main>
  </v-app>
</div>

【讨论】：