uni-app 安卓酷炫加载等待动画弹窗可自定义大小颜色样式 - 1***@qq.com setCanceledOnTouchOutside设置了无效

在uni-app中实现一个可自定义大小、颜色样式的安卓酷炫加载等待动画弹窗，并且确保setCanceledOnTouchOutside设置有效，我们可以利用uni.showLoading配合自定义样式和一些额外的处理来实现。不过需要注意的是，uni.showLoading本身不支持完全自定义样式和大小，但我们可以通过一些技巧来达到类似效果。

以下是一个基于uni-app的示例代码，使用自定义组件来模拟一个更加灵活的加载动画，并确保点击外部可以取消加载弹窗。

1. 创建自定义加载动画组件

首先，我们创建一个自定义组件CustomLoading.vue：

<template>
  <view v-if="visible" class="loading-overlay" @touchstart.self="handleTouchStart">
    <view class="loading-content" :style="loadingStyle">
      <!-- 自定义加载动画 -->
      <view class="spinner"></view>
      <text>{{ message }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    message: String,
    loadingStyle: Object
  },
  methods: {
    handleTouchStart(e) {
      // 阻止外部点击事件冒泡
      e.stopPropagation();
    }
  }
}
</script>

<style scoped>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-rgba: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.loading-content {
  /* 根据loadingStyle动态调整 */
}
.spinner {
  /* 自定义加载动画样式 */
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

2. 在页面中使用自定义加载动画组件

<template>
  <view>
    <button @click="showLoading">显示加载</button>
    <CustomLoading :visible="isLoading" :message="'加载中...'" :loadingStyle="loadingStyle" />
  </view>
</template>

<script>
import CustomLoading from '@/components/CustomLoading.vue';

export default {
  components: { CustomLoading },
  data() {
    return {
      isLoading: false,
      loadingStyle: {
        width: '200px',
        height: '200px',
        backgroundColor: '#fff',
        padding: '20px',
        borderRadius: '10px',
        color: '#333'
      }
    };
  },
  methods: {
    showLoading() {
      this.isLoading = true;
      setTimeout(() => {
        this.isLoading = false;
      }, 3000);
    }
  }
}
</script>

在这个示例中，我们通过自定义组件CustomLoading来实现加载动画，并通过visible属性控制显示隐藏。点击外部区域时，由于handleTouchStart方法阻止了事件冒泡，因此不会触发页面上的其他点击事件，相当于实现了setCanceledOnTouchOutside的效果。