uniapp如何loading动画

Uniapp中可以使用weex组件的`loading`组件来实现loading动画。具体操作如下：

1. 在需要加入loading动画的页面，引入`weex`组件：

<template>
  <div>
    <loading v-if="showLoading"></loading>
  </div>
</template>
<script>
  import { Loading } from 'weex-ui';
  export default {
    components: {
      Loading
    },
    data() {
      return {
        showLoading: true
      }
    }
  }
</script>

2. 在需要显示loading动画的时候，将`showLoading`设置为`true`即可。

this.showLoading = true;

3. 在需要隐藏loading动画的时候，将`showLoading`设置为`false`即可。

this.showLoading = false;

以上就是使用`weex`组件实现loading动画的方法。

相关问题

uniapp loading动画

### 创建 Loading 动画

在 UniApp 中创建 loading 动画可以通过自定义组件来实现。通过引入特定的动画样式并利用 Vue 的响应式特性，可以轻松管理显示和隐藏状态。

#### 自定义加载中页面动画弹跳动画组件

首先，在 `components` 文件夹下新建一个名为 `mix-load.vue` 的文件用于封装加载动画逻辑：

<template>
  <view v-if="visible" class="load-container">
    <!-- 加载图标 -->
    <image src="/static/loading.gif"></image>
    <text>正在加载...</text>
  </view>
</template>

<script>
export default {
  name: 'MixLoad',
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    showAnimation() {
      this.visible = true;
    },
    hideAnimation() {
      this.visible = false;
    }
  }
};
</script>

<style scoped>
.load-container {
  position: fixed;
  top: var(--top, 0px); /* 使用 CSS 变量设置顶部距离 */
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 添加更多样式以美化加载效果 */
</style>

此代码片段展示了如何构建一个简单的全屏遮罩层加上 GIF 图片作为视觉反馈[^1]。

#### 在页面中使用 MixLoad 组件

接着，在想要应用这个功能的具体页面里注册上述组件，并调用其方法控制可见性：

import MixLoad from '@/components/mix-load';

export default {
  components: { MixLoad },
  mounted() {
    // 延迟模拟数据请求过程中的加载提示
    setTimeout(() => {
      this.$refs.mixLoad.showAnimation();
      
      // 模拟异步操作完成后的关闭动作
      setTimeout(() => {
        this.$refs.mixLoad.hideAnimation();
      }, 3000);
    }, 1000);
  }
}

为了调整加载框的位置，可以在父级元素上动态绑定内联样式传递给子组件内的 CSS 变量 `--top` 来改变默认值。

<mix-load :style="{ '--top': `${someTopValue}px` }" ref="mixLoad"/>

这样就完成了基于 UniApp 平台的一个简单而实用的加载指示器设计。

uniapp loading

在 Uni-app 中，你可以使用 `uni.showLoading` 和 `uni.hideLoading` 方法来显示和隐藏加载动画。以下是一个简单的示例：

methods: {
  showLoading() {
    uni.showLoading({
      title: '加载中...',
      mask: true // 是否显示透明蒙层，防止触摸穿透，默认为 false
    });
  },
  hideLoading() {
    uni.hideLoading();
  }
}

你可以在需要显示加载动画的地方调用 `showLoading` 方法，然后在需要隐藏加载动画的地方调用 `hideLoading` 方法。例如，在发送请求之前显示加载动画，在请求完成后隐藏加载动画。

methods: {
  fetchData() {
    this.showLoading();
    
    // 发送请求
    axios.get('http://api.example.com/data')
      .then(response => {
        // 处理响应
        console.log(response.data);
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      })
      .finally(() => {
        this.hideLoading();
      });
  }
}

这样，当发送请求时，会显示加载动画，请求完成后加载动画会被隐藏。记得在实际使用时根据需要调整代码和样式。