From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 115 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue b/minipro_standard/uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue
index e69de29..03a78ad 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue
@@ -0,0 +1,115 @@
+<template>
+ <u-transition
+ :show="loading"
+ :custom-style="{
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: bgColor,
+ display: 'flex',
+ }"
+ >
+ <view class="u-loading-page">
+ <view class="u-loading-page__warpper">
+ <view class="u-loading-page__warpper__loading-icon">
+ <image
+ v-if="image"
+ :src="image"
+ class="u-loading-page__warpper__loading-icon__img"
+ mode="widthFit"
+ :style="{
+ width: $u.addUnit(iconSize),
+ height: $u.addUnit(iconSize)
+ }"
+ ></image>
+ <u-loading-icon
+ v-else
+ :mode="loadingMode"
+ :size="$u.addUnit(iconSize)"
+ :color="loadingColor"
+ ></u-loading-icon>
+ </view>
+ <slot>
+ <text
+ class="u-loading-page__warpper__text"
+ :style="{
+ fontSize: $u.addUnit(fontSize),
+ color: color,
+ }"
+ >{{ loadingText }}</text
+ >
+ </slot>
+ </view>
+ </view>
+ </u-transition>
+</template>
+
+<script>
+import props from "./props.js";
+/**
+ * loadingPage 鍔犺浇鍔ㄧ敾
+ * @description 璀︽缁勪欢涓轰竴涓皬鍔ㄧ敾锛岀洰鍓嶇敤鍦╱View鐨刲oadmore鍔犺浇鏇村鍜宻witch寮�鍏崇瓑缁勪欢鐨勬鍦ㄥ姞杞界姸鎬佸満鏅��
+ * @tutorial https://www.uviewui.com/components/loading.html
+ * @property {String | Number} loadingText 鎻愮ず鍐呭 (榛樿 '姝ｅ湪鍔犺浇' )
+ * @property {String} image 鏂囧瓧涓婃柟鐢ㄤ簬鏇挎崲loading鍔ㄧ敾鐨勫浘鐗�
+ * @property {String} loadingMode 鍔犺浇鍔ㄧ敾鐨勬ā寮忥紝circle-鍦嗗舰锛宻pinner-鑺辨湹褰紝semicircle-鍗婂渾褰� 锛堥粯璁� 'circle' 锛�
+ * @property {Boolean} loading 鏄惁鍔犺浇涓� 锛堥粯璁� false 锛�
+ * @property {String} bgColor 鑳屾櫙鑹� 锛堥粯璁� '#ffffff' 锛�
+ * @property {String} color 鏂囧瓧棰滆壊 锛堥粯璁� '#C8C8C8' 锛�
+ * @property {String | Number} fontSize 鏂囧瓧澶у皬 锛堥粯璁� 19 锛�
+ * @property {String | Number} iconSize 鍥炬爣澶у皬 锛堥粯璁� 28 锛�
+ * @property {String} loadingColor 鍔犺浇涓浘鏍囩殑棰滆壊锛屽彧鑳絩gb鎴栬�呭崄鍏繘鍒堕鑹插�� 锛堥粯璁� '#C8C8C8' 锛�
+ * @property {Object} customStyle 鑷畾涔夋牱寮�
+ * @example <u-loading mode="circle"></u-loading>
+ */
+export default {
+ name: "u-loading-page",
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ data() {
+ return {};
+ },
+ methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+$text-color: rgb(200, 200, 200) !default;
+$text-size: 19px !default;
+$u-loading-icon-margin-bottom: 10px !default;
+
+.u-loading-page {
+ @include flex(column);
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+
+ &__warpper {
+ margin-top: -150px;
+ justify-content: center;
+ align-items: center;
+ /* #ifndef APP-NVUE */
+ color: $text-color;
+ font-size: $text-size;
+ /* #endif */
+ @include flex(column);
+
+ &__loading-icon {
+ margin-bottom: $u-loading-icon-margin-bottom;
+
+ &__img {
+ width: 40px;
+ height: 40px;
+ }
+ }
+
+ &__text {
+ font-size: $text-size;
+ color: $text-color;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3