Vue를 사용하여 풀다운 새로 고침 및 풀업 로딩을 구현하는 방법은 무엇입니까?

모바일 인터넷의 인기로 인해 새로 고침을 위한 풀다운과 로드를 위한 풀업이 최신 앱 및 웹 사이트의 표준 기능 중 하나가 되었습니다. 이 두 가지 상호 작용 방법은 사용자 경험과 페이지 성능을 크게 향상시킬 수 있습니다. Vue 프레임워크에서는 일부 플러그인을 사용하거나 직접 코드를 작성하여 이 두 가지 상호 작용 방법을 구현할 수 있습니다.

풀다운 새로고침 구현

풀다운 새로고침은 사용자가 페이지를 아래로 당겨 데이터 새로고침을 실행한다는 의미입니다. Vue에서는 모든 Vue 옵션과 API를 통해 풀다운 새로 고침을 구현할 수 있으며, 가장 빠르고 안정적인 방법은 vue-pull-to를 사용하는 것입니다.

vue-pull-to는 Vue에서 당겨서 새로 고침 작업을 구현하는 구성 요소로, 매우 간단하게 애플리케이션에 당겨서 새로 고침을 추가할 수 있습니다. Vue.js Summit 강사 Matt Maribojoc이 개발한 이 구성 요소는 vue-pull-to를 일반 Vue 구성 요소를 사용하는 것처럼 쉽고 깔끔하게 만듭니다.

먼저 프로젝트에 vue-pull-to를 설치합니다:

npm install vue-pull-to --save

그런 다음 풀다운 새로 고침이 필요한 구성 요소에 vue-pull-to를 도입하고 현재 Vue의 구성 요소로 등록합니다.

<template>
  <div>
    <pull-to @refresh="refresh" :disabled="disabled" :high-action="true">
      <div v-for="(item, index) in list" :key="index" class="item">{{ item }}</div>
    </pull-to>
  </div>
</template>

<script>
  import PullTo from 'vue-pull-to'

  export default {
    components: {
      PullTo
    },
    data() {
      return {
        list: [], // 下拉刷新的数据
        disabled: false, // 是否禁用下拉刷新
      }
    },
    methods: {
      // 下拉刷新回调事件
      refresh() {
        // 发送请求，获取最新数据
        axios.get('/getList').then(res => {
          this.list = res.data
        })
      }
    }
  }
</script>

위 코드에서는 먼저 vue-pull-to를 도입하고 컴포넌트로 등록합니다. 그런 다음 템플릿의 풀투 태그를 사용하고 새로 고침 이벤트(이 이벤트는 사용자가 페이지를 풀다운할 때 트리거됨)를 수신한 다음 새로 고침 콜백 함수에서 서버에 요청을 보내 최신 데이터를 가져옵니다. 풀다운 새로 고침이 완료된 후 목록 데이터가 업데이트되고 페이지가 다시 렌더링되도록 목록에 데이터를 할당합니다.

풀업 로딩 구현

풀업 로딩은 일반적으로 페이지가 아래로 스크롤될 때 발생하며, 페이지는 자동으로 데이터 로딩 작업을 실행합니다. Vue에서는 vue-infinite-loading 플러그인을 사용하여 풀업 로딩 기능을 구현할 수 있습니다.

vue-infinite-loading은 목록을 스크롤할 때 콘텐츠나 데이터를 동적으로 추가할 수 있는 긴 목록을 위한 Vue 기반 로딩 플러그인입니다. 스크롤 이벤트를 수신하는 두 가지 방법을 제공합니다. 첫 번째는 필수 사용이고 두 번째는 구성 요소 기반 사용이며 로드 중 및 더 이상 데이터가 없을 때 상태 관리를 지원합니다.

먼저 프로젝트에 vue-infinite-loading을 설치합니다:

npm install vue-infinite-loading --save

그런 다음 풀업 로딩을 추가해야 하는 컴포넌트에 vue-infinite-loading 컴포넌트를 도입하고 현재 Vue의 컴포넌트로 등록합니다.

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="item">
      {{ item }}
    </div>
    <infinite-loading :on-infinite="onInfinite" spinner="bubbles" :distance="120">
      <div slot="no-results">没有更多了</div>
    </infinite-loading>
  </div>
</template>

<script>
  import InfiniteLoading from 'vue-infinite-loading'

  export default {
    components: {
      InfiniteLoading
    },
    data() {
      return {
        list: [], // 上拉加载的数据
        page: 1, // 当前页码
        size: 10, // 每页数量
        isLoading: false, // 是否正在加载中
      }
    },
    methods: {
      // 上拉加载回调事件
      onInfinite() {
        if (this.isLoading) return
        this.isLoading = true
        axios.get('/getList', {page: this.page, size: this.size}).then(res => {
          this.list = this.list.concat(res.data)
          this.page++
          this.isLoading = false
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
        })
      }
    }
  }
</script>

위 코드에서는 먼저 vue-infinite-loading을 도입하고 컴포넌트로 등록합니다. 그런 다음 템플릿에서 무한 로딩 태그를 사용하고 on-infinite 이벤트(이 이벤트는 사용자가 맨 아래로 스크롤할 때 트리거됨)를 수신한 다음 onInfinite 콜백 함수에서 서버에 요청을 보내 다음 이벤트를 얻습니다. 목록 배열에서 $InfiniteLoading:loaded 이벤트를 트리거하면 페이지가 로드될 때 로드 상태가 지워지고 페이지가 업데이트되고 렌더링됩니다. 또한 거리 속성을 사용하여 로딩을 트리거하는 거리를 제어하고, 스피너 속성을 사용하여 로딩 애니메이션을 설정하고, 결과 없음 슬롯을 사용하여 로딩 완료 후 프롬프트 정보를 설정할 수 있습니다.

요약

모바일 인터넷 시대에 풀다운 새로 고침과 풀업 로딩은 최신 앱과 웹사이트의 표준 기능이 되었습니다. 사용자 경험을 향상시키기 위해 Vue는 이 두 가지 상호 작용을 구현하는 몇 가지 플러그인과 API를 제공합니다. 개발자가 신속하게 해당 기능을 추가하여 사용자 경험을 더욱 편안하게 만드는 방법. Vue의 풀다운 새로고침 및 풀업 로딩 방법에 대해 간략하게 소개하고 코드 데모를 진행했습니다. 실제 개발에 참여하는 모든 분들께 도움이 되기를 바랍니다.

위 내용은 Vue를 사용하여 풀다운 새로 고침 및 풀업 로딩을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!