u-loading-page.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  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. :style="{
  23. width: $u.addUnit(iconSize),
  24. height: $u.addUnit(iconSize)
  25. }"
  26. ></image>
  27. <u-loading-icon
  28. v-else
  29. :mode="loadingMode"
  30. :size="$u.addUnit(iconSize)"
  31. :color="loadingColor"
  32. ></u-loading-icon>
  33. </view>
  34. <slot>
  35. <text
  36. class="u-loading-page__warpper__text"
  37. :style="{
  38. fontSize: $u.addUnit(fontSize),
  39. color: color,
  40. }"
  41. >{{ loadingText }}</text
  42. >
  43. </slot>
  44. </view>
  45. </view>
  46. </u-transition>
  47. </template>
  48. <script>
  49. import props from "./props.js";
  50. /**
  51. * loadingPage 加载动画
  52. * @description 警此组件为一个小动画,目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
  53. * @tutorial https://www.uviewui.com/components/loading.html
  54. * @property {String | Number} loadingText 提示内容 (默认 '正在加载' )
  55. * @property {String} image 文字上方用于替换loading动画的图片
  56. * @property {String} loadingMode 加载动画的模式,circle-圆形,spinner-花朵形,semicircle-半圆形 (默认 'circle' )
  57. * @property {Boolean} loading 是否加载中 (默认 false )
  58. * @property {String} bgColor 背景色 (默认 '#ffffff' )
  59. * @property {String} color 文字颜色 (默认 '#C8C8C8' )
  60. * @property {String | Number} fontSize 文字大小 (默认 19 )
  61. * @property {String | Number} iconSize 图标大小 (默认 28 )
  62. * @property {String} loadingColor 加载中图标的颜色,只能rgb或者十六进制颜色值 (默认 '#C8C8C8' )
  63. * @property {Object} customStyle 自定义样式
  64. * @example <u-loading mode="circle"></u-loading>
  65. */
  66. export default {
  67. name: "u-loading-page",
  68. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  69. data() {
  70. return {};
  71. },
  72. methods: {},
  73. };
  74. </script>
  75. <style lang="scss" scoped>
  76. @import "../../libs/css/components.scss";
  77. $text-color: rgb(200, 200, 200) !default;
  78. $text-size: 19px !default;
  79. $u-loading-icon-margin-bottom: 10px !default;
  80. .u-loading-page {
  81. @include flex(column);
  82. flex: 1;
  83. align-items: center;
  84. justify-content: center;
  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. &__loading-icon {
  95. margin-bottom: $u-loading-icon-margin-bottom;
  96. &__img {
  97. width: 40px;
  98. height: 40px;
  99. }
  100. }
  101. &__text {
  102. font-size: $text-size;
  103. color: $text-color;
  104. }
  105. }
  106. }
  107. </style>