Vue를 사용하여 무한 스크롤 및 폭포 흐름 레이아웃을 구축하는 방법은 무엇입니까?

Vue.js는 개발자가 동적이고 반응성이 뛰어난 웹 애플리케이션을 쉽게 만들 수 있는 인기 있는 JavaScript 프레임워크입니다. 그 중에서도 특히 강력한 구성 요소 개발 기능으로 인해 개발자들에게 선호됩니다. 무한 스크롤링과 워터폴 레이아웃은 현대 웹 개발에서 없어서는 안 될 기능 중 하나가 되었습니다.

이 글의 목적은 Vue.js를 일부 타사 라이브러리와 결합하여 무한 스크롤 및 워터폴 레이아웃 기능을 구현하는 방법을 소개하는 것입니다.

무한 스크롤 달성

무한 스크롤은 페이지 하단으로 스크롤할 때 계속해서 더 많은 콘텐츠를 로드하여 페이지 콘텐츠의 무한 확장을 달성하는 것을 말합니다. 이 기술은 수천 개의 데이터 항목에 적용되며 사용자 경험을 크게 향상시킬 수 있습니다.

데이터 소스 준비

먼저 최소한 일부 데이터 항목이 포함된 데이터 소스를 준비해야 합니다. 여기서는 설명하기 위해 간단한 예를 사용합니다. 100개의 데이터 항목이 포함된 무한 스크롤 가능한 목록이 있다고 가정하면 데이터 소스는 다음과 같습니다.

[
  {id: 1, text: 'Item 1'},
  {id: 2, text: 'Item 2'},
  // ... more data
  {id: 99, text: 'Item 99'},
  {id: 100, text: 'Item 100'},
]

vue-infinite-scroll 라이브러리를 설치하고 사용합니다

다음에는 무한 스크롤 기능의 핵심 메커니즘과 필요한 지시문 및 구성 요소를 제공하는 vue-infinite-scroll이라는 라이브러리입니다. 이 라이브러리를 설치하려면 npm 명령을 사용할 수 있습니다.

npm install vue-infinite-scroll

필요한 지침을 전역적으로 등록합니다.

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

구성 요소에서 일부 구성 및 데이터를 설정해야 합니다.

<template>
  <div class="scroll-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>
    <div v-if="busy" class="loading">
      Loading ...
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        this.items = [...this.items, ...newItems]
        // 增加当前页数
        this.page++
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}
</script>

코드 설명

• v- 무한 -scroll="loadMore": 더 많은 데이터를 로드하기 위한 콜백 함수를 지정하는 데 사용v-infinite-scroll="loadMore"：用于指定加载更多数据的回调函数
• infinite-scroll-disabled="busy"：用于指定当前是否正在请求数据
• infinite-scroll-distance="10"
infinite-scroll-disabled="busy": 현재 데이터가 요청되고 있는지 여부를 지정하는 데 사용

infinite-scroll-distance="10": 하단에서 스크롤 막대의 픽셀 수를 지정할 때 데이터 로드 동작을 트리거하는 데 사용됩니다

폭포 흐름 레이아웃 구현

Waterfall은 공통 레이아웃의 핵심 개념은 다양한 크기의 항목이 동일한 행에 나타날 수 있으며 폭포 흐름 레이아웃은 항목 수에 따라 자동으로 조정된다는 것입니다. vue-waterfall이라는 Vue 타사 구성 요소 라이브러리를 사용하면 단 몇 줄의 코드만으로 폭포 레이아웃을 쉽게 구현할 수 있습니다.

vue-waterfall 라이브러리 설치 및 사용

먼저 vue-waterfall 구성 요소 라이브러리를 설치해야 합니다.

npm install vue-waterfall

구성 요소를 전역적으로 등록합니다.

import waterfall from 'vue-waterfall'
Vue.use(waterfall)

그런 다음 구성 요소에서 폭포 흐름 레이아웃을 사용할 수 있습니다.

<template>
  <waterfall>
    <div v-for="(item, index) in items" :key="index">
      <h3>{{item.title}}</h3>
      <p>{{item.desc}}</p>
      <img :src="item.imgUrl" :alt="item.title">
    </div>
  </waterfall>
</template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}
</script>

코드 설명

이 코드는 axios 라이브러리를 사용하여 데이터 소스에서 데이터를 가져옵니다. 데이터 구조는 대략 다음과 같습니다.

[
  {
    title: 'Item 1',
    desc: 'This is item 1',
    imgUrl: 'https://example.com/item1.png',
  },
  {
    title: 'Item 2',
    desc: 'This is item 2',
    imgUrl: 'https://example.com/item2.png',
  },
  // ...
]

무한 스크롤 및 폭포 흐름 레이아웃 최적화

실제로 실제 애플리케이션 시나리오에서는 무한 스크롤 및 폭포 흐름 처리 흐름 레이아웃을 수행할 때 직면하는 일반적인 문제: 데이터 소스가 매우 큰 경우 구성 요소의 성능이 급격히 떨어지며 응답이 느려지거나 심지어 중단될 수 있습니다. 여기서는 구성 요소 성능을 향상시키기 위한 몇 가지 최적화 전략을 소개합니다.

가상 스크롤 기술 사용

가상 스크롤 기술의 기본 아이디어는 모든 데이터를 렌더링하는 것이 아니라 조회 간격에 따라 사용자가 보는 데이터만 렌더링하는 것입니다. 이런 방식으로 우리는 컴포넌트의 렌더링 비용을 크게 줄여 성능을 향상시킬 수 있습니다. vue-virtual-scroll-list 구성 요소는 vue-infinite-scroll 또는 vue-waterfall 라이브러리와 함께 사용할 수 있는 가상 스크롤 구현을 위한 신뢰할 수 있는 라이브러리입니다.

vue-virtual-scroll-list 라이브러리 설치:

npm install vue-virtual-scroll-list

이 라이브러리를 사용할 때 구성 요소에서 다음과 같이 수정해야 합니다.

<template>
  <virtual-scroll-list :size="75" :remain="10" :items="items" :key-field="'id'">
    <div slot-scope="{item}">
      <h3>{{item.title}}</h3>
      <p>{{item.desc}}</p>
      <img :src="item.imgUrl" :alt="item.title">
    </div>
  </virtual-scroll-list>
</template>
<script>
import axios from 'axios'
import VirtualScrollList from 'vue-virtual-scroll-list'

export default {
  components: { VirtualScrollList },
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}
</script>

그 중 vue-waterfall 구성 요소를 vue-virtual로 대체합니다. -scroll-list 구성 요소, 가상 스크롤 효과를 얻기 위한 것입니다.

부분 로드

구성 요소 렌더링의 스트레스를 줄이는 또 다른 방법은 데이터를 부분적으로 로드하는 것입니다. 이 방식은 앞에서 언급한 무한 스크롤과 유사하지만 데이터를 로드할 때 모든 데이터를 한 번에 가져오는 것이 아니라 요청에 따라 분할된 데이터를 로드합니다. 분할 로딩을 구현하는 방법은 무엇입니까? 간단한 해결책은 한 번에 처음 N개의 데이터만 로드한 다음 사용자가 맨 아래로 스크롤한 후 다음 데이터 조각을 로드하는 것입니다. 이 방법은 데이터 양이 상대적으로 많은 상황에 적합합니다.

<template>
  <div class="scroll-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>
    <div v-if="busy" class="loading">
      Loading ...
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        if (this.page <= 10) {
          this.items = [...this.items, ...newItems]
          // 增加当前页数
          this.page++
        } else {
          this.busy = true
        }
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}
</script>

이 코드에서는 loadMore 함수를 수정했습니다. 이제 데이터의 처음 10페이지만 가져옵니다. 이렇게 하면 데이터가 많아도 점차적으로 로딩을 함으로써 컴포넌트에 대한 부담을 줄일 수 있다.

요약🎜🎜이 기사에서는 Vue.js를 사용하여 무한 스크롤 및 폭포 레이아웃 기능을 만드는 방법을 소개하고 구성 요소 성능을 향상시키기 위한 몇 가지 최적화 조치도 구현했습니다. 일반적으로 vue-infinite-scroll, vue-waterfall 및 vue-virtual-scroll-list 세 가지 라이브러리는 작업을 완료하는 데 충분하지만 실제 개발에서는 다양한 시나리오와 다양한 데이터 구조도 고려해야 합니다. 귀하의 현재 프로젝트에 가장 적합한 솔루션입니다. 🎜

위 내용은 Vue를 사용하여 무한 스크롤 및 폭포 흐름 레이아웃을 구축하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!