uniapp加载时等待页面

要在uniapp中实现加载时等待页面，可以通过以下步骤实现：

1. 在项目中新建一个loading.vue组件，用于显示加载时的等待页面。

2. 在App.vue中使用v-if指令来控制loading组件的显示和隐藏。具体来说，当应用程序正在加载数据时，显示loading组件，加载完成后隐藏。

3. 在需要加载数据的页面中，使用uni.showLoading()函数来显示加载提示。在数据加载完成后，使用uni.hideLoading()函数来隐藏提示。

4. 可以使用uni.request()函数来发起网络请求，并且在请求完成后隐藏加载提示。

下面是一个简单的代码示例，可以作为参考：

loading.vue组件：

<template>
  <div v-if="isLoading">
    <div class="loading"></div>
    <div class="loading-text">数据加载中，请稍后...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    };
  }
};
</script>

<style>
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid #ccc;
  border-top-color: #33aaff;
  animation: spin 1s linear infinite;
}

.loading-text {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: 20px;
  margin-left: -40px;
  width: 80px;
  text-align: center;
  color: #888;
  font-size: 14px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>

App.vue：

<template>
  <div>
    <loading></loading>
    <router-view></router-view>
  </div>
</template>

<script>
import loading from "@/components/loading.vue";

export default {
  components: {
    loading
  },
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    showLoading() {
      this.isLoading = true;
    },
    hideLoading() {
      this.isLoading = false;
    }
  }
};
</script>

在需要加载数据的页面中：

<script>
export default {
  methods: {
    loadData() {
      this.$parent.showLoading();
      uni.request({
        url: "http://example.com/api/data",
        success: res => {
          // 处理数据
          this.$parent.hideLoading();
        },
        fail: () => {
          // 处理错误
          this.$parent.hideLoading();
        }
      });
    }
  }
};
</script>