uniapp에서 전역적으로 로딩을 사용자 정의하는 방법

모바일 인터넷의 급속한 발전으로 모바일 애플리케이션은 사람들의 삶에 없어서는 안 될 부분이 되었습니다. 모바일 애플리케이션 개발에서 애니메이션 로딩은 사용자 경험을 크게 향상시키고 사용자가 애플리케이션 피드백을 더 빠르게 인식할 수 있도록 하는 데 특히 중요합니다. 이 글에서는 uniapp을 사용하여 글로벌 커스텀 로딩 애니메이션을 구현하고 사용자 경험을 개선하는 방법을 소개합니다.

1. 로딩 애니메이션을 사용자 정의해야 하는 이유

애플리케이션에서 애니메이션 로딩은 일반적으로 두 가지 상황으로 나뉩니다.

1. 배경과의 상호 작용을 기다리는 경우: 백그라운드 인터페이스를 요청하려면 일정 시간 동안 기다려야 합니다. 이때 일반적으로 사용자에게 로딩 중임을 알리는 로딩 애니메이션이 필요합니다.
2. 초기 로딩 시간이 너무 깁니다. 예를 들어, 애플리케이션이 열리면 애플리케이션의 초기 로딩을 기다려야 합니다. 이때 사용자에게 애플리케이션이 로딩 중임을 상기시키는 로딩 애니메이션도 필요합니다. .

그러나 기본 스타일 로딩 애니메이션은 우리의 요구 사항을 충족하지 못하는 경우가 많으며 사용자 경험을 개선하려면 사용자 정의 스타일과 애니메이션이 필요한 경우가 많습니다. 따라서 로딩 애니메이션을 전역적으로 맞춤설정해야 합니다.

2. 구현 계획

uniapp에서는 App.vue에 Loading 컴포넌트를 구현하여 글로벌 커스텀 로딩 애니메이션을 구현할 수 있습니다. 부모 컴포넌트와 자식 컴포넌트 간의 통신을 통해 글로벌 로딩 애니메이션을 표시하고 숨기는 것이 원칙입니다.

1. 로딩 컴포넌트 생성

src/comComponents 폴더에 Loading 폴더를 생성한 후 그 안에 Loading.vue 파일을 생성하여 맞춤형 로딩 애니메이션 효과를 표시합니다.

코드는 다음과 같습니다.

<template>
  <div v-show="isShow" class="loading">
    <img src="@/static/loading.gif" alt="loading" />
  </div>
</template>

<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style>
  .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  img {
    width: 60px;
    height: 60px;
  }
</style>

위 코드에서는 div를 생성하고 로딩 애니메이션을 표시하는 스타일을 설정했습니다. isShow 속성은 props를 통해 전달되며 로딩 애니메이션을 표시해야 하는지 여부를 결정하는 데 사용됩니다.

2. App.vue에 Loading 컴포넌트 소개

App.vue에서 Loading 컴포넌트를 도입하고 v-show를 통해 표시 및 숨기기를 제어해야 합니다.

코드는 다음과 같습니다.

<template>
  <div>
    <Loading :isShow="isLoading" />
    <router-view />
  </div>
</template>

<script>
import Loading from '@/components/Loading/Loading'

export default {
  components: {
    Loading
  },

  data() {
    return {
      isLoading: false
    }
  },

  methods: {
    startLoading() {
      this.isLoading = true
    },

    endLoading() {
      this.isLoading = false
    }
  },

  mounted() {
    this.$bus.$on('startLoading', this.startLoading)
    this.$bus.$on('endLoading', this.endLoading)
  },

  beforeDestroy() {
    this.$bus.$off('startLoading', this.startLoading)
    this.$bus.$off('endLoading', this.endLoading)
  }
}
</script>

App.vue에 Loading 컴포넌트를 도입하고 v-show를 통해 표시 및 숨기기를 제어했습니다. 동시에 데이터에 isLoading 변수를 설정하여 Loading 구성 요소의 표시를 제어합니다.

마운트된 라이프 사이클에서 $bus.$on을 통해 startLoading 및 endLoading이라는 이벤트를 수신합니다. 이 두 이벤트는 로드 애니메이션을 사용하여 상위 구성 요소에 Loading 구성 요소를 표시하거나 숨기도록 알려야 하는 곳에서 트리거됩니다. 메모리 누수를 방지하려면 beforeDestroy 수명 주기에서 $bus.$off를 통해 청취 기능을 제거하세요.

3. 로딩 애니메이션이 필요한 경우 startLoading 및 endLoading 이벤트를 트리거합니다.

로딩 애니메이션이 필요한 경우 $bus.$emit을 통해 startLoading 및 endLoading 이벤트를 트리거하여 App.vue의 Loading 구성 요소에 표시 및 숨기기를 알립니다.

예를 들어, 비동기 요청에서:

import axios from 'axios'

export default {
  methods: {
    async fetchData() {
      try {
        this.$bus.$emit('startLoading') // 触发startLoading事件，显示Loading组件
        const response = await axios.get('/api/data') // 这里是异步请求数据
        console.log(response.data)
      } catch (error) {
        console.error(error)
      } finally {
        this.$bus.$emit('endLoading') // 触发endLoading事件，隐藏Loading组件
      }
    }
  }
}

위 코드에서는 데이터를 비동기적으로 요청하기 전에 $bus.$emit를 통해 startLoading 이벤트를 트리거했습니다. 이는 요청이 완료된 후 Loading 구성 요소를 표시하는 데 사용됩니다. Loading 구성 요소를 숨기려면 endLoading 이벤트가 트리거됩니다.

위의 세 단계를 통해 간단한 글로벌 커스텀 로딩 애니메이션을 구현할 수 있습니다.

3. 요약

모바일 애플리케이션 개발에서 애니메이션 로딩은 매우 중요한 피드백 메커니즘입니다. uniapp에서는 글로벌 Loading 컴포넌트를 커스터마이징함으로써 커스텀 로딩 애니메이션을 쉽게 구현하고 사용자 경험을 향상시킬 수 있습니다.

이 기사에서는 주로 세 단계로 전역 사용자 정의 로딩 애니메이션을 구현합니다. 먼저 사용자 정의 로딩 애니메이션 효과를 표시하기 위해 Loading 구성 요소를 생성한 다음 App.vue에 도입하고 해당 표시 및 제어를 v-show를 통해 제어합니다. . 표시하거나 숨기도록 App.vue의 Loading 구성 요소에 알리기 위해 애니메이션 로딩이 필요한 startLoading 및 endLoading 이벤트를 숨기고 마지막으로 트리거합니다.

위 내용은 uniapp에서 전역적으로 로딩을 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!