快应用 loading 框的实现?


解决方法一:可以通过自定义 loading 组件实现,简单示例如下:

  1. 创建公共组件 loading.ux
<template>
  <div class="loading-page">
    <progress class="loading-icon" type="circular"></progress>
    <text class="loading-text">页面加载中...</text>
  </div>
</template>
<script>
  export default {
    data: {}
  };
</script>
<style>
  .loading-page {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: fixed;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .loading-icon {
    width: 100px;
    height: 100px;
  }
  .loading-text {
    font-size: 30px;
    color: #000000;
    text-align: center;
    margin-top: 50px;
  }
</style>
  1. 在需要 loading 的页面引用改组件
<import name="comp-loading" src="xxx/loading.ux"></import>

<template>
  <div class="page">
    <comp-loading show="{{isLoading}}"></comp-loading>
  </div>
</template>
<script>
  export default {
    data: {
      isLoading: false
    }
  };
</script>
<style>
  .page {
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
</style>

解决方法二:使用 apexUI 组件库,toast 组件

组件库源码 apex-ui

results matching ""

    No results matching ""