Uni-app H5页面Loading动画控制：隐藏与自定义

在 Uni-app 开发中，H5 页面加载时默认会显示一个 Loading 动画，提示用户页面正在加载。在某些情况下，您可能希望隐藏或自定义此 Loading 动画，以提升用户体验。以下是几种实现方法：

一、隐藏默认 Loading 动画

要隐藏 Uni-app H5 页面加载时的默认 Loading 动画，可以在 manifest.json 文件的 H5 编译配置中调整 async 的 delay 参数。通过将 delay 设置为一个较大的值，确保页面资源在 Loading 动画显示之前已加载完成，从而避免显示默认的 Loading 动画。

操作步骤：

1. 打开项目根目录下的 manifest.json 文件。
2. 找到 H5 编译配置部分，修改 async 的 delay 参数，例如：

   "h5": {
     "async": {
       "delay": 10000 // 设置延迟时间为 10 秒（10000 毫秒）
     }
   }
   

将 delay 设置为 10000 毫秒（即 10 秒），通常可以确保页面资源在此时间内加载完成，从而避免显示默认的 Loading 动画。

二、自定义 Loading 动画

如果您希望在页面加载时显示自定义的 Loading 动画，可以按照以下步骤进行：

1. 创建自定义 Loading 组件：
   在 components 目录下创建一个新的 Vue 组件，例如 MyLoading.vue，并添加您设计的 Loading 动画内容和样式。

   <template>
     <div class="my-loading">
       <!-- 自定义的 Loading 动画内容 -->
       <img src="your-loading-animation.gif" alt="Loading..." />
       <p>正在加载，请稍候...</p>
     </div>
   </template>
   
   <style scoped>
   .my-loading {
     /* 自定义 Loading 动画的样式 */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
     z-index: 9999; /* 确保 Loading 层级最高 */
   }
   </style>
   

2. 在页面中引入并使用自定义 Loading 组件：
   在需要显示 Loading 动画的页面中，引入并使用 MyLoading 组件，并通过控制 isLoading 的值来显示或隐藏 Loading 动画。

   <template>
     <div>
       <!-- 页面内容 -->
       <MyLoading v-if="isLoading" />
       <!-- 其他页面内容 -->
     </div>
   </template>
   
   <script>
   import MyLoading from '@/components/MyLoading.vue';
   
   export default {
     components: {
       MyLoading
     },
     data() {
       return {
         isLoading: true // 初始状态为加载中
       };
     },
     mounted() {
       // 模拟异步加载
       setTimeout(() => {
         this.isLoading = false; // 加载完成后隐藏 Loading
       }, 2000); // 2 秒后隐藏 Loading
     }
   };
   </script>
   

三、按需加载，针对不同页面设置 Loading

如果您希望针对不同页面设置 Loading 动画的显示与否，可以在 pages.json 文件中进行配置。通过在页面的 style 中设置 h5.async.delay，您可以控制每个页面的 Loading 动画显示策略。

操作步骤：

1. 打开项目根目录下的 pages.json 文件。
2. 在对应页面的 style 中添加 h5.async.delay 配置，例如：

   {
     "path": "pages/index/index",
     "style": {
       "h5": {
         "async": {
           "delay": 0 // 设置为 0 毫秒，立即显示 Loading 动画
         }
       }
     }
   }
   

通过上述配置，您可以灵活地控制不同页面的 Loading 动画显示策略，以满足项目的具体需求。

注意事项：

• 性能优化： 无论采用哪种方法，都应注意性能优化，避免因过度自定义或复杂的 Loading 动画影响页面加载速度。
• 用户体验： 设计 Loading 动画时，应考虑动画的流畅性和美观性，避免使用过于花哨或闪烁的效果，以免影响用户体验。

通过以上方法，您可以根据项目需求，自由地隐藏或自定义 Uni-app H5 页面加载时的 Loading 动画，提升用户体验。