uniapp loading组件代码

以下是一个简单的 UniApp Loading 组件代码示例：

<template>
  <view class="loading-container">
    <loading :show="loading"></loading>
    <view class="content">
      <view class="item" v-for="item in list" :key="item.id">{{ item.name }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        list: []
      }
    },
    mounted() {
      this.loading = true;
      // 模拟异步请求数据
      setTimeout(() => {
        this.list = [{id: 1, name: 'item 1'}, {id: 2, name: 'item 2'}, {id: 3, name: 'item 3'}];
        this.loading = false;
      }, 2000);
    }
  }
</script>

<style>
  .loading-container {
    position: relative;
  }
  .content {
    margin-top: 50px;
  }
</style>

在上述代码中，我们使用了 UniApp 内置的 Loading 组件来实现加载动画效果。在组件的 data 中定义了 loading 和 list 两个变量，分别表示加载状态和要展示的列表数据。在 mounted 钩子函数中，我们模拟了一个异步请求数据的过程，将 loading 状态设置为 true，2 秒后通过 setTimeout 将 list 设置为模拟数据，并将 loading 状态设置为 false，这样就能在数据加载完成后隐藏 loading 动画。

需要注意的是，我们在 HTML 中使用了 Vue 的 v-for 指令来遍历 list 数组并渲染每一个 item，这里的 :key="item.id" 是为了帮助 Vue 标识每一个 item 的唯一性，提高渲染效率。此外，我们在样式中设置了 loading-container 的 position 为 relative，这是为了让其内部的子元素能够相对于其进行定位，实现 loading 动画的遮罩效果。