Bagaimana untuk menyesuaikan pemuatan secara global dalam uniapp

Dengan perkembangan pesat Internet mudah alih, aplikasi mudah alih telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Dalam pembangunan aplikasi mudah alih, memuatkan animasi adalah amat penting. Ia boleh meningkatkan pengalaman pengguna dengan ketara dan membolehkan pengguna melihat maklum balas aplikasi dengan lebih pantas. Artikel ini akan memperkenalkan cara menggunakan uniapp untuk melaksanakan animasi pemuatan tersuai global dan meningkatkan pengalaman pengguna.

1 Mengapa anda perlu menyesuaikan animasi pemuatan

Dalam aplikasi, memuatkan animasi ialah kaedah maklum balas yang sangat biasa, yang biasanya dibahagikan kepada dua situasi:

1. Menunggu interaksi dengan latar belakang: Contohnya, apabila meminta antara muka latar belakang, anda perlu menunggu untuk tempoh masa tertentu Pada masa ini, kami biasanya memerlukan animasi pemuatan untuk mengingatkan pengguna bahawa ia sedang dimuatkan.
2. Masa pemuatan awal terlalu lama: Contohnya, apabila aplikasi dibuka, ia perlu menunggu pemuatan awal aplikasi Pada masa ini, kami juga memerlukan animasi pemuatan untuk mengingatkan pengguna itu aplikasi sedang dimuatkan.

Walau bagaimanapun, animasi pemuatan gaya lalai selalunya tidak dapat memenuhi keperluan kami dan gaya serta animasi tersuai sering diperlukan untuk meningkatkan pengalaman pengguna. Oleh itu, kita perlu menyesuaikan animasi pemuatan secara global.

2. Pelan pelaksanaan

Dalam uniapp, anda boleh melaksanakan animasi pemuatan tersuai global dengan melaksanakan komponen Memuatkan dalam App.vue Prinsipnya adalah melalui komunikasi antara komponen ibu bapa dan anak memaparkan dan menyembunyikan animasi pemuatan global.

1. Buat Komponen Pemuatan

Buat folder Pemuatan di bawah folder src/komponen, dan kemudian buat fail Loading.vue di dalamnya untuk memaparkan kesan animasi pemuatan Ditakrifkan tersuai .

Kodnya adalah seperti berikut:

<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>

Dalam kod di atas, kami mencipta div dan menetapkan gayanya untuk memaparkan animasi pemuatan. Atribut isShow dihantar melalui prop dan digunakan untuk menentukan sama ada animasi pemuatan perlu dipaparkan.

2. Memperkenalkan komponen Memuatkan dalam App.vue

Dalam App.vue, kita perlu memperkenalkan komponen Memuatkan dan mengawal paparannya serta bersembunyi melalui rancangan v.

Kodnya adalah seperti berikut:

<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>

Kami memperkenalkan komponen Memuatkan dalam App.vue dan mengawal paparan serta bersembunyi melalui v-show. Pada masa yang sama, kami menetapkan pembolehubah isLoading dalam data untuk mengawal paparan komponen Memuatkan.

Dalam kitaran hayat yang dipasang, dengarkan acara yang dinamakan startLoading dan endLoading melalui $bus.$on Kedua-dua peristiwa ini dicetuskan di mana kita perlu menggunakan animasi pemuatan untuk memberitahu komponen induk untuk memaparkan atau Sembunyikan komponen Memuatkan. . Alih keluar fungsi mendengar melalui $bus.$off dalam kitaran hayat beforeDestroy untuk mengelakkan kebocoran memori.

3. Cetuskan startLoading dan endLoading acara yang memuatkan animasi diperlukan

Di mana memuatkan animasi diperlukan, kami mencetuskan startLoading dan endLoading acara melalui $bus.$emit , maklumkan Loading komponen dalam App.vue untuk ditunjukkan dan disembunyikan.

Sebagai contoh, dalam permintaan tak segerak:

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组件
      }
    }
  }
}

Dalam kod di atas, kami mencetuskan acara startLoading melalui $bus.$emit sebelum meminta data secara tidak segerak, yang digunakan untuk memaparkan komponen Memuatkan dan permintaan Selepas tamat, acara endLoading dicetuskan untuk menyembunyikan komponen Memuatkan.

Melalui tiga langkah di atas, kami boleh melaksanakan animasi pemuatan tersuai global yang mudah.

3. Ringkasan

Dalam pembangunan aplikasi mudah alih, memuatkan animasi ialah mekanisme maklum balas yang sangat penting. Dalam uniapp, dengan menyesuaikan komponen Pemuatan global, kami boleh melaksanakan animasi pemuatan tersuai dengan mudah dan meningkatkan pengalaman pengguna.

Artikel ini terutamanya melaksanakan animasi pemuatan tersuai global melalui tiga langkah Pertama, komponen Pemuatan dicipta untuk memaparkan kesan animasi pemuatan tersuai, dan kemudian komponen Pemuatan diperkenalkan dalam App.vue, melalui v-show Control. paparan dan penyembunyiannya, dan akhirnya mencetuskan acara startLoading dan endLoading di mana memuatkan animasi diperlukan untuk memberitahu komponen Memuatkan dalam App.vue untuk memaparkan atau menyembunyikan.

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan pemuatan secara global dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!