From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 11:46:57 +0800 Subject: [PATCH] 项目初始化 --- uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 110 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue b/uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue new file mode 100644 index 0000000..c6b51b9 --- /dev/null +++ b/uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue @@ -0,0 +1,110 @@ +<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" + ></image> + <u-loading-icon + v-else + :mode="loadingMode" + size="28" + :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 鎻愮ず鍐呭 (榛樿 '姝e湪鍔犺浇' ) + * @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} 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