Vue에서 이미지나 목록의 스크롤 로딩을 구현하는 방법은 무엇입니까?-View.js-php.cn

Vue에서 이미지나 목록의 스크롤 로딩을 구현하는 방법은 무엇입니까?

王林

풀어 주다： 2023-06-25 15:40:40

원래의

3275명이 탐색했습니다.

웹 애플리케이션이 점점 더 복잡해짐에 따라 페이지에 많은 수의 사진이나 목록을 표시해야 하는 경우가 많습니다. 모든 콘텐츠를 한 번에 로드하면 페이지 로딩 속도와 사용자 경험에 큰 영향을 미치게 됩니다. 이 경우 스크롤 로딩이 매우 인기 있는 방법이 되었습니다.

무한 스크롤이라고도 불리는 스크롤 로딩은 사용자가 페이지를 스크롤하는 동안 AJAX 기술을 통해 실시간으로 후속 데이터를 요청하는 것을 의미합니다. 이 기술은 효율적인 경험을 달성하기 위해 Facebook, Twitter, Instagram 등과 같은 소셜 미디어 사이트에서 널리 사용됩니다.

Vue.js에서는 일반적으로 롤링 로딩을 구현하는 두 가지 방법이 있습니다. 하나는 직접 코드를 작성하는 것이고, 다른 하나는 타사 플러그인을 사용하는 것입니다. 다음으로 하나씩 소개하겠습니다.

1. 롤링 로딩을 구현하는 자신만의 코드 작성

Vue.js는 페이지의 스크롤 이벤트를 모니터링하는 데 사용할 수 있는 매우 편리한 명령 v-scroll을 제공합니다. 스크롤할 때 div 요소의 scrollTop 거리가 하단에 도달하는지 여부를 확인할 수 있습니다. 하단에 도달하면 후속 데이터 요청이 트리거됩니다.

다음은 v-scroll을 사용하여 이미지의 스크롤 로딩을 구현하는 샘플 코드입니다.

<template>
  <div class="image-list" v-scroll="onScroll">
    <div class="image" v-for="image in images" :key="image.id">
      <img :src="image.src" />
    </div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      loading: false,
      page: 1,
      pageSize: 10
    }
  },

  mounted() {
    this.loadImages()
  },

  methods: {
    loadImages() {
      this.loading = true
      // 模拟请求数据，每次请求 10 条数据
      setTimeout(() => {
        let start = (this.page - 1) * this.pageSize
        let end = start + this.pageSize
        for (let i = start; i < end; i++) {
          this.images.push({
            id: i,
            src: `http://www.example.com/images/${i}.jpg`
          })
        }
        this.loading = false
        this.page++
      }, 1000)
    },

    onScroll(e) {
      // 获取 div 元素的 scrollTop 和 clientHeight
      let scrollTop = e.target.scrollTop
      let clientHeight = e.target.clientHeight
      let scrollHeight = e.target.scrollHeight
      // 比较 scrollTop + clientHeight 和 scrollHeight
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadImages()
      }
    }
  }
}
</script>

로그인 후 복사

이 예에서는 v-scroll을 사용하여 div 요소의 스크롤 이벤트를 수신하고 바닥에 도달했는지 확인합니다. onScroll 메서드에서는 마지막에 데이터에 대한 비동기 요청을 시뮬레이션하고 데이터를 이미지 배열로 푸시하는 loadImages 메서드가 트리거됩니다. 또한, 사용자 경험을 개선하기 위해 데이터가 실시간으로 로드되고 있음을 알리는 로딩 변수를 추가했습니다.

2. 타사 플러그인을 사용하여 롤링 로딩 구현

롤링 로딩을 구현하기 위해 직접 코드를 작성하는 것 외에도 일부 타사 플러그인을 사용하여 롤링 로딩을 구현할 수도 있습니다. 여기에서는 일반적으로 사용되는 두 가지 플러그인, 즉 vue-infinite-scroll과 vue-virtual-scroll-list를 소개합니다.

vue-infinite-scroll 플러그인

vue-infinite-scroll은 Vue.js를 기반으로 한 무한 스크롤 플러그인으로 목록, 사진 및 기타 시나리오의 스크롤을 실현하는 데 도움이 됩니다. 이 플러그인을 사용하는 방법은 매우 간단합니다. 롤링 로딩을 구현해야 하는 구성 요소에 v-infinite-scroll 지시문을 추가한 다음 롤링 로딩을 트리거하는 데 필요한 메서드를 지정하기만 하면 됩니다.

다음은 vue-infinite-scroll 플러그인을 사용해 스크롤 로딩 목록을 구현한 샘플 코드입니다.

<template>
  <div class="list" v-infinite-scroll="loadMore">
    <div class="item" v-for="(item, index) in items" :key="index">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import InfiniteScroll from 'vue-infinite-scroll'

export default {
  mixins: [InfiniteScroll],

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore() {
      // 模拟异步请求数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.items.push({ text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

로그인 후 복사

이번 예시에서는 먼저 npm을 통해 vue-infinite-scroll 플러그인을 설치하고 소개했습니다. 구성 요소에. 그런 다음 믹스인을 사용하여 실행될 수 있는 무한 스크롤 이벤트를 자동으로 생성하는 Vue 인스턴스를 현재 구성 요소에 혼합합니다. 마지막으로 v-infinite-scroll 지시문에 loadMore 메서드를 지정합니다. 이 메서드는 데이터에 대한 비동기 요청을 시뮬레이션하고 해당 데이터를 항목 배열에 푸시합니다.

vue-virtual-scroll-list 플러그인

vue-virtual-scroll-list는 Vue.js 기반의 가상 스크롤 플러그인으로, 대규모 목록 스크롤을 빠르게 구현하고 페이지를 개선하는 데 도움이 됩니다. 성능과 사용자 경험. 기존 스크롤 로딩과 달리 vue-virtual-scroll-list는 가상 스크롤 기술을 사용하여 현재 표시되는 영역의 데이터 항목만 렌더링하므로 많은 수의 DOM 렌더링 및 재배열을 방지하고 페이지의 효율성과 부드러움을 향상시킵니다. .

다음은 vue-virtual-scroll-list 플러그인을 사용해 스크롤 로딩 목록을 구현한 샘플 코드입니다.

<template>
  <virtual-list
    :size="50"
    :remain="10"
    :data-key="'id'"
    :data-sources="items"
    :data-component="$options.components.item"
    @load="loadMore"
  >
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'
import Item from './Item.vue'

export default {
  components: { Item },

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore(start, end) {
      // 模拟异步请求数据
      setTimeout(() => {
        let count = end - start
        for (let i = 0; i < count; i++) {
          this.items.push({ id: this.items.length + 1, text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

로그인 후 복사

이 예시에서는 먼저 vue-virtual-scroll-list 플러그인을 다음을 통해 설치했습니다. npm을 구성 요소에 도입했습니다. 그런 다음 크기, 유지, 데이터 키, 데이터 소스 및 데이터 구성 요소와 같은 매개 변수를 허용하는 템플릿의 구성 요소를 사용합니다.

그 중 size 매개변수는 각 데이터 항목의 높이를 지정하고, 나머지 매개변수는 사전 렌더링 수를 지정하며, data-key는 각 데이터 항목을 고유하게 식별하는 데 사용되는 필드를 지정하고, data-sources는 해당 데이터 목록을 지정합니다. 렌더링해야 하는 경우 데이터 구성 요소는 데이터 항목의 렌더링 구성 요소를 지정합니다. 마지막으로 로드 이벤트에서 데이터를 비동기적으로 요청하는 로직을 실행합니다.

결론

위의 소개를 통해 Vue.js에서 이미지나 목록의 스크롤 로딩을 구현하는 방법이 여러 가지가 있음을 알 수 있습니다. 직접 코드를 작성하는 것은 유연하지만 많은 코드가 필요하고 일정량의 시간과 에너지가 필요합니다. 타사 플러그인을 사용하는 것은 간단하지만 플러그인의 원리와 사용법에 대한 심층적인 이해가 필요합니다. 사업을 더 잘 발전시키기 위해. 따라서 롤링 로딩을 구현할 때 특정 비즈니스 시나리오와 자신의 강점에 따라 적합한 방법을 선택해야 합니다.

위 내용은 Vue에서 이미지나 목록의 스크롤 로딩을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!