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": 하단에서 스크롤 막대의 픽셀 수를 지정할 때 데이터 로드 동작을 트리거하는 데 사용됩니다

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>

[
  {
    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',
  },
  // ...
]

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>

로그인 후 복사

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!