文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp如何全局自定义加载

2023-05-22 09:37

关注

随着移动互联网的迅速发展,移动应用已经成为人们生活中不可或缺的一部分。而在移动应用开发中,加载动画就显得格外重要,它可以明显提升用户体验,让用户更快地感知到应用的反馈。而本文将介绍如何利用uniapp实现全局自定义加载动画,提升用户体验。

一、为什么需要自定义加载动画

在一个应用中,加载动画是非常常见的一种反馈方式,一般分为两种情况:

  1. 与后台交互等待:例如在请求后台接口时需要等待一定的时间,这时我们一般需要一个加载动画来提示用户正在加载。
  2. 初始加载时间过长:例如一个应用打开时,需要等待应用的初始加载,这时我们也需要一个加载动画来提示用户应用正在加载。

但是对于默认样式的加载动画,往往无法满足我们的需求,往往需要自定义样式和动画来提升用户体验。因此,我们需要全局自定义加载动画。

二、实现方案

在uniapp中,可以通过在App.vue中实现一个Loading组件来实现全局自定义加载动画,其原理就是通过父子组件之间的通信,实现全局加载动画的显示和隐藏。

  1. 创建Loading组件

在src/components文件夹下,创建一个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,设置了其样式用于显示loading动画。isShow属性通过props传递进来,用于判断是否需要展示加载动画。

  1. 在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控制其显示和隐藏。同时,我们在data中设置了isLoading变量用于控制Loading组件的显示。

在mounted生命周期中,通过$bus.$on监听名为startLoading和endLoading的事件,这两个事件是我们在需要使用加载动画的位置触发的,用于通知父组件显示或隐藏Loading组件。在beforeDestroy生命周期中通过$bus.$off移除监听函数,避免内存泄漏。

  1. 在需要使用加载动画的地方触发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组件,请求结束后再触发endLoading事件,用于隐藏Loading组件。

通过上述三个步骤,我们就可以实现一个简单的全局自定义加载动画了。

三、总结

在移动应用开发中,加载动画是非常重要的反馈机制。而在uniapp中,通过自定义全局Loading组件,我们可以很方便地实现自定义加载动画,提升用户体验。

本文主要通过三个步骤实现了全局自定义加载动画,首先创建了Loading组件,用于展示自定义的加载动画效果,然后在App.vue中引入Loading组件,通过v-show控制其显示和隐藏,最后在需要使用加载动画的地方触发startLoading和endLoading事件,用于通知App.vue中的Loading组件显示或隐藏。

以上就是uniapp如何全局自定义加载的详细内容,更多请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯