Vue3 Quasar簡易Lazy Loading

tp27933

已于 2023-05-24 16:53:26 修改

阅读量841

点赞数

分类专栏： vue筆記 js筆記文章标签： vue.js javascript 前端

于 2023-05-15 14:10:10 首次发布

本文链接：https://blog.csdn.net/tp27933/article/details/130683236

版权

js筆記同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue筆記

14 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue应用中使用混入（mixin）和IntersectionObserverAPI创建一个懒加载功能。它定义了一个名为`lazyLoad`的mixin，该mixin包含一个`inView`数组和`onIntersection`方法来处理视口内的元素。在模板中，使用v-intersection指令结合quasar指令系统来触发懒加载效果。

摘要由CSDN通过智能技术生成

直接上代碼

src/mixins/lazyLoad.js

import { reactive } from 'vue'

export default function () {
  const inView = reactive([])
  const onIntersection = (entry) => {
    if (entry.isIntersecting === true) {
      add(`${entry.target.dataset.id}`)
    }
  }

  function add(i) {
    inView.push(i)
    inView.sort(sortAtoi)
  }

  function sortAtoi(a, b) {
    return Number(a) - Number(b)
  }
	return {
		inView,
		onIntersection
	}
}

調用方法：

<template>
    <card
      v-for="(hotel, index) in hotelList"
      :key="index"
      v-intersection="onIntersection"
      :in-view="inView.includes(`hotelCard-${index - 1}`)"
     >
         <!-- 代碼省略 -->
    </card>
</template>

<script setup>
import LazyLoad from 'src/mixins/lazyLoad'


const { onIntersection, inView } = LazyLoad()

</script>

<style lang="scss" scoped>
/*--lazy load --*/
.in-view-item {
  transition: all 0.3s;
  display: block;
}

.in-view-enter,
.in-view-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.in-view-leave-active {
  position: absolute;
}
</style>