| commit | author | age | ||
| e3ba12 | 1 | <template> |
| Z | 2 | <u-transition |
| 3 | :show="loading" | |
| 4 | :custom-style="{ | |
| 5 | position: 'fixed', | |
| 6 | top: 0, | |
| 7 | left: 0, | |
| 8 | right: 0, | |
| 9 | bottom: 0, | |
| 10 | backgroundColor: bgColor, | |
| 11 | display: 'flex', | |
| 12 | }" | |
| 13 | > | |
| 14 | <view class="u-loading-page"> | |
| 15 | <view class="u-loading-page__warpper"> | |
| 16 | <view class="u-loading-page__warpper__loading-icon"> | |
| 17 | <image | |
| 18 | v-if="image" | |
| 19 | :src="image" | |
| 20 | class="u-loading-page__warpper__loading-icon__img" | |
| 21 | mode="widthFit" | |
| 22 | ></image> | |
| 23 | <u-loading-icon | |
| 24 | v-else | |
| 25 | :mode="loadingMode" | |
| 26 | size="28" | |
| 27 | :color="loadingColor" | |
| 28 | ></u-loading-icon> | |
| 29 | </view> | |
| 30 | <slot> | |
| 31 | <text | |
| 32 | class="u-loading-page__warpper__text" | |
| 33 | :style="{ | |
| 34 | fontSize: $u.addUnit(fontSize), | |
| 35 | color: color, | |
| 36 | }" | |
| 37 | >{{ loadingText }}</text | |
| 38 | > | |
| 39 | </slot> | |
| 40 | </view> | |
| 41 | </view> | |
| 42 | </u-transition> | |
| 43 | </template> | |
| 44 | ||
| 45 | <script> | |
| 46 | import props from "./props.js"; | |
| 47 | /** | |
| 48 | * loadingPage 加载动画 | |
| 49 | * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。 | |
| 50 | * @tutorial https://www.uviewui.com/components/loading.html | |
| 51 | * @property {String | Number} loadingText 提示内容 (默认 '正在加载' ) | |
| 52 | * @property {String} image 文字上方用于替换loading动画的图片 | |
| 53 | * @property {String} loadingMode 加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形 （默认 'circle' ） | |
| 54 | * @property {Boolean} loading 是否加载中 （默认 false ） | |
| 55 | * @property {String} bgColor 背景色 （默认 '#ffffff' ） | |
| 56 | * @property {String} color 文字颜色 （默认 '#C8C8C8' ） | |
| 57 | * @property {String | Number} fontSize 文字大小 （默认 19 ） | |
| 58 | * @property {String} loadingColor 加载中图标的颜色，只能rgb或者十六进制颜色值 （默认 '#C8C8C8' ） | |
| 59 | * @property {Object} customStyle 自定义样式 | |
| 60 | * @example <u-loading mode="circle"></u-loading> | |
| 61 | */ | |
| 62 | export default { | |
| 63 | name: "u-loading-page", | |
| 64 | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], | |
| 65 | data() { | |
| 66 | return {}; | |
| 67 | }, | |
| 68 | methods: {}, | |
| 69 | }; | |
| 70 | </script> | |
| 71 | ||
| 72 | <style lang="scss" scoped> | |
| 73 | @import "../../libs/css/components.scss"; | |
| 74 | ||
| 75 | $text-color: rgb(200, 200, 200) !default; | |
| 76 | $text-size: 19px !default; | |
| 77 | $u-loading-icon-margin-bottom: 10px !default; | |
| 78 | ||
| 79 | .u-loading-page { | |
| 80 | @include flex(column); | |
| 81 | flex: 1; | |
| 82 | align-items: center; | |
| 83 | justify-content: center; | |
| 84 | ||
| 85 | &__warpper { | |
| 86 | margin-top: -150px; | |
| 87 | justify-content: center; | |
| 88 | align-items: center; | |
| 89 | /* #ifndef APP-NVUE */ | |
| 90 | color: $text-color; | |
| 91 | font-size: $text-size; | |
| 92 | /* #endif */ | |
| 93 | @include flex(column); | |
| 94 | ||
| 95 | &__loading-icon { | |
| 96 | margin-bottom: $u-loading-icon-margin-bottom; | |
| 97 | ||
| 98 | &__img { | |
| 99 | width: 40px; | |
| 100 | height: 40px; | |
| 101 | } | |
| 102 | } | |
| 103 | ||
| 104 | &__text { | |
| 105 | font-size: $text-size; | |
| 106 | color: $text-color; | |
| 107 | } | |
| 108 | } | |
| 109 | } | |
| 110 | </style> | |
