uni-app h5 加载动画

<think>我们正在讨论的是在uni-app的H5端实现加载动画。根据uni-app的特性，我们可以使用多种方式实现加载动画，包括使用CSS动画、JavaScript动画、或者使用uni-app提供的API（如uni.showLoading）等。但是需要注意，uni.showLoading在H5端可能表现不一致，因此有时需要自定义实现。参考引用[4]中提到了uni-app的项目结构，我们可以在页面或组件中编写自定义的加载动画。以下是一个简单的实现方案：1.使用CSS动画创建加载动画效果。2.在需要显示加载动画的时候，通过条件渲染显示动画元素。具体步骤：###步骤1：创建加载动画组件（可选）我们可以创建一个可复用的加载动画组件，例如`loading-animation.vue`，放在`components`目录下。```vue<template><viewclass="loading-container"v-if="show"><viewclass="loading-spinner"></view><!--可以添加文字--><textclass="loading-text">加载中...</text></view></template><script>exportdefault{props:{show:{type:Boolean,default:false}}}</script><stylescoped>.loading-container{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(255,255,255,0.7);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:9999;}.loading-spinner{width:40px;height:40px;border:4pxsolid#f3f3f3;border-top:4pxsolid#3498db;border-radius:50%;animation:spin1slinearinfinite;}@keyframesspin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.loading-text{margin-top:10px;color:#3498db;}</style>```###步骤2：在页面中使用该组件在页面中引入并注册组件，然后通过一个状态变量（如`isLoading`）来控制加载动画的显示。```vue<template><view><!--页面内容-->...<!--加载动画组件--><loading-animation:show="isLoading"/></view></template><script>importLoadingAnimationfrom'@/components/loading-animation.vue'exportdefault{components:{LoadingAnimation},data(){return{isLoading:false}},methods:{//模拟加载数据fetchData(){this.isLoading=true//模拟异步请求setTimeout(()=>{this.isLoading=false},2000)}},onLoad(){this.fetchData()}}</script>```###注意事项-在H5端，我们使用固定定位（position:fixed）来覆盖整个屏幕。-可以根据需要调整动画的样式和文字。-如果不想创建组件，也可以直接在页面中编写加载动画的代码。###使用uni.showLoadinguni-app提供了`uni.showLoading`API，但在H5端，它实际上是一个模态弹窗，可能会阻塞用户操作。如果希望使用这个API，可以这样：```javascriptuni.showLoading({title:'加载中...',mask:true//是否显示透明蒙层，防止触摸穿透})//在数据加载完成后调用uni.hideLoading()```但是，请注意，`uni.showLoading`在H5端的样式可能无法自定义，而且在不同平台的表现可能略有差异。如果需要更灵活的加载动画，建议使用自定义组件的方式。###总结在uni-app的H5端实现加载动画，推荐使用自定义组件的方式，这样可以灵活控制样式和动画效果，并且可以复用。如果对样式要求不高，也可以使用`uni.showLoading`，但要注意其在H5端的行为。§§相关问题§§1.在uni-app中如何实现跨平台的加载动画（同时适配H5和小程序）？2.uni.showLoading在H5端有哪些限制？3.如何优化加载动画的性能，避免卡顿？4.在uni-app中，除了加载动画，还有哪些常用的交互反馈API？</think>在 uni-app 的 H5 端实现加载动画，可以通过以下几种方法实现： ### 方法 1：使用 uni-app 原生 API uni-app 提供了统一的加载提示 API，在 H5 端会自动适配： ```javascript // 显示加载动画 uni.showLoading({ title: '加载中...', // 提示文字 mask: true // 防止触摸穿透 }) // 数据加载完成后隐藏 setTimeout(() => { uni.hideLoading() }, 2000) ``` **特点**： - 跨平台兼容（H5/小程序/App） - 自带蒙层防止用户操作 - 默认使用系统原生样式 - 简单易用无需额外样式[^2] ### 方法 2：自定义 CSS 动画组件 创建可复用的加载动画组件（`components/loading.vue`）： ```vue <template> <view v-if="visible" class="loading-overlay"> <view class="loading-spinner"> <view v-for="i in 12" :key="i" :style="{ transform: `rotate(${i * 30}deg)` }"></view> </view> <text class="loading-text">{{ title }}</text> </view> </template> <script> export default { props: { visible: Boolean, title: { type: String, default: '加载中...' } } } </script> <style scoped> .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; } .loading-spinner { width: 40px; height: 40px; position: relative; } .loading-spinner view { width: 20%; height: 40%; position: absolute; left: 40%; top: 0; background: #fff; border-radius: 50px; animation: spin 1.2s linear infinite; animation-delay: calc(var(--i) * 0.1s); opacity: calc(1 - var(--i) * 0.08); } @keyframes spin { 0% { opacity: 1; } 100% { opacity: 0.1; } } .loading-text { color: #fff; margin-top: 15px; } </style> ``` **使用方式**： ```vue <template> <view> <loading :visible="isLoading" title="数据加载中"/> </view> </template> <script> import Loading from '@/components/loading.vue' export default { components: { Loading }, data() { return { isLoading: false } }, methods: { async fetchData() { this.isLoading = true await uni.request({ url: 'https://api.example.com/data' }) this.isLoading = false } } } </script> ``` ### 方法 3：使用 CSS 框架 集成第三方动画库如 [animate.css](https://animate.style/)： ```bash npm install animate.css ``` ```vue <template> <view class="animate__animated" :class="{'animate__bounceIn': loading}"> <!-- 加载内容 --> </view> </template> <script> import 'animate.css/animate.min.css' export default { data() { return { loading: true } }, mounted() { setTimeout(() => this.loading = false, 2000) } } </script> ``` ### 最佳实践建议 1. **全局管理状态**：使用 Vuex 管理加载状态，避免多个组件重复控制 2. **网络请求拦截**：在请求拦截器中自动显示/隐藏加载动画 ```javascript // utils/http.js uni.addInterceptor('request', { invoke(args) { uni.showLoading({ mask: true }) }, success() { uni.hideLoading() } }) ``` 3. **性能优化**： - 使用 CSS 硬件加速（`transform` 和 `opacity`） - 避免复杂动画影响页面渲染 - 对长列表使用虚拟滚动 4. **平台适配**：通过条件编译处理平台差异 ```javascript // #ifdef H5 // H5 特有优化代码 // #endif ``` > **提示**：在 H5 端实现加载动画时，建议优先使用 uni-app 原生 API 保持跨平台一致性，对于复杂动画场景可使用自定义组件方案[^1][^2]。