Intersection observer

v-intersect 指令使用了 Intersection Observer API。 它提供了一个易于使用的接口，用于检测元素在用户视图中可见的时间。这也用于 v-lazy 组件。

用例

滚动窗口并观看彩色的点。注意 v-card 会从 error 变为 success

template script

  1. <template>
  2.   <div>
  3.     <div class="d-flex align-center text-center justify-center">
  4.       <v-avatar
  5.         :color="isIntersecting ? 'green lighten-1' : 'red darken-2'"
  6.         class="mr-3 swing-transition"
  7.         size="32"
  8.       ></v-avatar>
  9.     </div>
  11.     <v-responsive
  12.       class="overflow-y-auto"
  13.       max-height="400"
  14.     >
  15.       <v-responsive
  16.         height="200vh"
  17.         class="d-flex align-center text-center pa-2"
  18.       >
  19.         <v-card
  20.           v-intersect="onIntersect"
  21.           class="mx-auto"
  22.           max-width="336"
  23.         >
  24.           <v-card-title>Card title</v-card-title>
  26.           <v-card-text>
  27.             Phasellus magna. Quisque rutrum. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Aliquam lobortis. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna.
  29.             In turpis. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In turpis. Pellentesque dapibus hendrerit tortor. Ut varius tincidunt libero.
  30.           </v-card-text>
  31.         </v-card>
  32.       </v-responsive>
  33.     </v-responsive>
  34.   </div>
  35. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       isIntersecting: false,
  5.     }),
  7.     methods: {
  8.       onIntersect (entries, observer) {
  9.         // More information about these options
  10.         // is located here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  11.         this.isIntersecting = entries[0].isIntersecting
  12.       },
  13.     },
  14.   }
  15. </script>

Intersection observer - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Intersection observer - 图2

示例

下面是一些简单到复杂的例子。

和选项一起使用

v-intersect 指令接受选项。 可用的选项可以在 Intersection Observer API 中找到。 以下是使用 threshold 选项的示例。

template script

  1. <template>
  2.   <div>
  3.     <div class="d-flex align-center text-center justify-center">
  4.       <v-avatar
  5.         :color="isIntersecting ? 'green lighten-1' : 'red darken-2'"
  6.         class="mr-3 swing-transition"
  7.         size="32"
  8.       ></v-avatar>
  9.     </div>
  11.     <v-responsive class="overflow-y-auto" max-height="400">
  12.       <v-responsive height="200vh" class="d-flex align-center text-center pa-2">
  13.         <v-card
  14.           v-intersect="{
  15.             handler: onIntersect,
  16.             options: {
  17.               threshold: [0, 0.5, 1.0]
  18.             }
  19.           }"
  20.           class="mx-auto"
  21.           max-width="336"
  22.         >
  23.           <v-card-title>Card title</v-card-title>
  25.           <v-card-text>
  26.             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  27.             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
  28.             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  29.             aliquip ex ea commodo consequat. Duis aute irure dolor in
  30.             reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  31.             pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  32.             culpa qui officia deserunt mollit anim id est laborum.
  33.           </v-card-text>
  34.         </v-card>
  35.       </v-responsive>
  36.     </v-responsive>
  37.   </div>
  38. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       isIntersecting: false,
  5.     }),
  7.     methods: {
  8.       onIntersect (entries, observer) {
  9.         // More information about these options
  10.         // is located here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  11.         this.isIntersecting = entries[0].intersectionRatio >= 0.5
  12.       },
  13.     },
  14.   }
  15. </script>

Intersection observer - 图3

Polyfill

虽然 Intersection Observer API 默认在 IE11 中不可用，但它可以使用 polyfill 来实现。