모바일 인터넷의 인기로 인해 새로 고침을 위한 풀다운과 로드를 위한 풀업이 최신 앱 및 웹 사이트의 표준 기능 중 하나가 되었습니다. 이 두 가지 상호 작용 방법은 사용자 경험과 페이지 성능을 크게 향상시킬 수 있습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!