懒加载

v-lazy 组件用于根据元素的可见性动态加载组件。

v-lazy 组件使用 v-intersect 指令，该指令需要 Polyfill 才能在 IE11 / Safari 上运行。 在某些iOS 版本上可能还需要使用此 polyfill。

用例

默认情况下，v-lazy 组件在被相交之前不会渲染其内容。 向下滚动并查看元素经过时的渲染。

template script

  1. <template>
  2.   <v-responsive
  3.     class="overflow-y-auto"
  4.     max-height="400"
  5.   >
  6.     <div class="pa-6 text-center">
  7.       Scroll down
  8.     </div>
  10.     <v-responsive
  11.       height="200vh"
  12.       class="text-center pa-2"
  13.     >
  14.       <v-responsive min-height="50vh"></v-responsive>
  15.       <div class="text-center body-2 mb-12">The card will appear below:</div>
  17.       <v-lazy
  18.         v-model="isActive"
  19.         :options="{
  20.           threshold: .5
  21.         }"
  22.         min-height="200"
  23.         transition="fade-transition"
  24.       >
  25.         <v-card
  26.           class="mx-auto"
  27.           max-width="336"
  28.         >
  29.           <v-card-title>Card title</v-card-title>
  31.           <v-card-text>
  32.             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.
  34.             In turpis. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In turpis. Pellentesque dapibus hendrerit tortor. Ut varius tincidunt libero.
  35.           </v-card-text>
  36.         </v-card>
  37.       </v-lazy>
  38.     </v-responsive>
  39.   </v-responsive>
  40. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       isActive: false,
  5.     }),
  6.   }
  7. </script>

Lazy（懒加载）new - 图1

API

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

Lazy（懒加载）new - 图2