uniapp webview加载动画

uniApp 的 Webview 组件加载动画主要是为了提升用户体验，在页面从常规内容切换到 Webview 内容时添加一种视觉反馈，显示正在加载的内容。在 uniApp 中，你可以通过 CSS 和 JavaScript 来自定义 Webview 的加载动画效果。

以下是一个简单的示例：

<view class="container">
  <web-view :src="url" @loadstart="showLoading" @loadstop="hideLoading"></web-view>
</view>

<style scoped>
.container {
  position: relative;
}
.web-view-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<script>
export default {
  data() {
    return {
      url: 'https://example.com',
      isLoading: false,
    };
  },
  methods: {
    showLoading() {
      this.isLoading = true;
    },
    hideLoading() {
      this.isLoading = false;
      // 这里可以判断是否完成加载后再隐藏动画
      if (this.$refs.webView && this.$refs.webView已完成加载) {
        this.$refs.webView.classList.remove('web-view-loading');
      }
    },
  },
};
</script>

在这个例子中，当 `web-view` 开始加载 (`loadstart`) 时，`showLoading` 方法会被调用，显示灰色背景和旋转的加载图标；当 `web-view` 加载完毕 (`loadstop`) 时，`hideLoading` 方法会清除加载状态并隐藏动画。