From 659d09ec24dab6c451220c8f3bb3943b0fdb3ba1 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Mon, 08 Jan 2024 16:16:12 +0800 Subject: [PATCH] fix:地图导航 --- uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue | 343 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 343 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue b/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue new file mode 100644 index 0000000..2ede5c3 --- /dev/null +++ b/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue @@ -0,0 +1,343 @@ +<template> + <view + class="u-loading-icon" + :style="[$u.addStyle(customStyle)]" + :class="[vertical && 'u-loading-icon--vertical']" + v-if="show" + > + <view + v-if="!webviewHide" + class="u-loading-icon__spinner" + :class="[`u-loading-icon__spinner--${mode}`]" + ref="ani" + :style="{ + color: color, + width: $u.addUnit(size), + height: $u.addUnit(size), + borderTopColor: color, + borderBottomColor: otherBorderColor, + borderLeftColor: otherBorderColor, + borderRightColor: otherBorderColor, + 'animation-duration': `${duration}ms`, + 'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : '' + }" + > + <block v-if="mode === 'spinner'"> + <!-- #ifndef APP-NVUE --> + <view + v-for="(item, index) in array12" + :key="index" + class="u-loading-icon__dot" + > + </view> + <!-- #endif --> + <!-- #ifdef APP-NVUE --> + <!-- ������������������������������������������������������������width���height������������������ --> + <loading-indicator + v-if="!webviewHide" + class="u-loading-indicator" + :animating="true" + :style="{ + color: color, + width: $u.addUnit(size), + height: $u.addUnit(size) + }" + /> + <!-- #endif --> + </block> + </view> + <text + v-if="text" + class="u-loading-icon__text" + :style="{ + fontSize: $u.addUnit(textSize), + color: textColor, + }" + >{{text}}</text> + </view> +</template> + +<script> + import props from './props.js'; + // #ifdef APP-NVUE + const animation = weex.requireModule('animation'); + // #endif + /** + * loading ������������ + * @description ���������������������������������������������uView���loadmore���������������switch��������������������������������������������� + * @tutorial https://www.uviewui.com/components/loading.html + * @property {Boolean} show ������������������ (������ true) + * @property {String} color ������������������������������������ mode = flower ���������������������color['u-tips-color']��� + * @property {String} textColor ������������������������������color['u-tips-color']��� + * @property {Boolean} vertical ��������������������������������� (������ false ) + * @property {String} mode ��������������������������������������� 'circle' ��� + * @property {String | Number} size ������������������������������px ��������� 24 ��� + * @property {String | Number} textSize ��������������������� 15 ��� + * @property {String | Number} text ������������ + * @property {String} timingFunction ������������ ��������� 'ease-in-out' ��� + * @property {String | Number} duration ��������������������������������� 1200��� + * @property {String} inactiveColor mode=circle������������������ + * @property {Object} customStyle ��������������������������������� + * @example <u-loading mode="circle"></u-loading> + */ + export default { + name: 'u-loading-icon', + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + data() { + return { + // Array.form������������������������������������������������������������ + // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from + array12: Array.from({ + length: 12 + }), + // ������������������������������360������������������nvue���������������������duration������������������ + // ���iOS nvue������������������������������������������������������ + aniAngel: 360, // ������������������ + webviewHide: false, // ������webview������������������������������������������������������������������������ + loading: false, // ������������������������nvue������ + } + }, + computed: { + // ������circle��������������������������������������������������������������� + // ������������������������������������������������������������color������������������������������������������������������ + // ������������������������������������������(������������������������������������������������������������������������������) + otherBorderColor() { + const lightColor = uni.$u.colorGradient(this.color, '#ffffff', 100)[80] + if (this.mode === 'circle') { + return this.inactiveColor ? this.inactiveColor : lightColor + } else { + return 'transparent' + } + // return this.mode === 'circle' ? this.inactiveColor ? this.inactiveColor : lightColor : 'transparent' + } + }, + watch: { + show(n) { + // nvue������show���true������������loading������������������������������������ + // #ifdef APP-NVUE + if (n && !this.loading) { + setTimeout(() => { + this.startAnimate() + }, 30) + } + // #endif + } + }, + mounted() { + this.init() + }, + methods: { + init() { + setTimeout(() => { + // #ifdef APP-NVUE + this.show && this.nvueAnimate() + // #endif + // #ifdef APP-PLUS + this.show && this.addEventListenerToWebview() + // #endif + }, 20) + }, + // ������webview������������������ + addEventListenerToWebview() { + // webview��������� + const pages = getCurrentPages() + // ������������ + const page = pages[pages.length - 1] + // ���������������webview������ + const currentWebview = page.$getAppWebview() + // ������webview���������������������������������������������������(������������) + currentWebview.addEventListener('hide', () => { + this.webviewHide = true + }) + currentWebview.addEventListener('show', () => { + this.webviewHide = false + }) + }, + // #ifdef APP-NVUE + nvueAnimate() { + // nvue���������spinner���������������������������������nvue���spinner������������������weex��� + // loading-indicator��������������������������� + this.mode !== 'spinner' && this.startAnimate() + }, + // ������nvue���animate������������ + startAnimate() { + this.loading = true + const ani = this.$refs.ani + if (!ani) return + animation.transition(ani, { + // ������������������ + styles: { + transform: `rotate(${this.aniAngel}deg)`, + transformOrigin: 'center center' + }, + duration: this.duration, + timingFunction: this.timingFunction, + // delay: 10 + }, () => { + // ������������360deg��������������������������������� + this.aniAngel += 360 + // ���������������������������������������������������������������webviewHide������ + // nvue���������������������������������������������startAnimate������ + this.show && !this.webviewHide ? this.startAnimate() : this.loading = false + }) + } + // #endif + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + $u-loading-icon-color: #c8c9cc !default; + $u-loading-icon-text-margin-left:4px !default; + $u-loading-icon-text-color:$u-content-color !default; + $u-loading-icon-text-font-size:14px !default; + $u-loading-icon-text-line-height:20px !default; + $u-loading-width:30px !default; + $u-loading-height:30px !default; + $u-loading-max-width:100% !default; + $u-loading-max-height:100% !default; + $u-loading-semicircle-border-width: 2px !default; + $u-loading-semicircle-border-color:transparent !default; + $u-loading-semicircle-border-top-right-radius: 100px !default; + $u-loading-semicircle-border-top-left-radius: 100px !default; + $u-loading-semicircle-border-bottom-left-radius: 100px !default; + $u-loading-semicircle-border-bottom-right-radiu: 100px !default; + $u-loading-semicircle-border-style: solid !default; + $u-loading-circle-border-top-right-radius: 100px !default; + $u-loading-circle-border-top-left-radius: 100px !default; + $u-loading-circle-border-bottom-left-radius: 100px !default; + $u-loading-circle-border-bottom-right-radiu: 100px !default; + $u-loading-circle-border-width:2px !default; + $u-loading-circle-border-top-color:#e5e5e5 !default; + $u-loading-circle-border-right-color:$u-loading-circle-border-top-color !default; + $u-loading-circle-border-bottom-color:$u-loading-circle-border-top-color !default; + $u-loading-circle-border-left-color:$u-loading-circle-border-top-color !default; + $u-loading-circle-border-style:solid !default; + $u-loading-icon-host-font-size:0px !default; + $u-loading-icon-host-line-height:1 !default; + $u-loading-icon-vertical-margin:6px 0 0 !default; + $u-loading-icon-dot-top:0 !default; + $u-loading-icon-dot-left:0 !default; + $u-loading-icon-dot-width:100% !default; + $u-loading-icon-dot-height:100% !default; + $u-loading-icon-dot-before-width:2px !default; + $u-loading-icon-dot-before-height:25% !default; + $u-loading-icon-dot-before-margin:0 auto !default; + $u-loading-icon-dot-before-background-color:currentColor !default; + $u-loading-icon-dot-before-border-radius:40% !default; + + .u-loading-icon { + /* #ifndef APP-NVUE */ + // display: inline-flex; + /* #endif */ + flex-direction: row; + align-items: center; + justify-content: center; + color: $u-loading-icon-color; + + &__text { + margin-left: $u-loading-icon-text-margin-left; + color: $u-loading-icon-text-color; + font-size: $u-loading-icon-text-font-size; + line-height: $u-loading-icon-text-line-height; + } + + &__spinner { + width: $u-loading-width; + height: $u-loading-height; + position: relative; + /* #ifndef APP-NVUE */ + box-sizing: border-box; + max-width: $u-loading-max-width; + max-height: $u-loading-max-height; + animation: u-rotate 1s linear infinite; + /* #endif */ + } + + &__spinner--semicircle { + border-width: $u-loading-semicircle-border-width; + border-color: $u-loading-semicircle-border-color; + border-top-right-radius: $u-loading-semicircle-border-top-right-radius; + border-top-left-radius: $u-loading-semicircle-border-top-left-radius; + border-bottom-left-radius: $u-loading-semicircle-border-bottom-left-radius; + border-bottom-right-radius: $u-loading-semicircle-border-bottom-right-radiu; + border-style: $u-loading-semicircle-border-style; + } + + &__spinner--circle { + border-top-right-radius: $u-loading-circle-border-top-right-radius; + border-top-left-radius: $u-loading-circle-border-top-left-radius; + border-bottom-left-radius: $u-loading-circle-border-bottom-left-radius; + border-bottom-right-radius: $u-loading-circle-border-bottom-right-radiu; + border-width: $u-loading-circle-border-width; + border-top-color: $u-loading-circle-border-top-color; + border-right-color: $u-loading-circle-border-right-color; + border-bottom-color: $u-loading-circle-border-bottom-color; + border-left-color: $u-loading-circle-border-left-color; + border-style: $u-loading-circle-border-style; + } + + &--vertical { + flex-direction: column + } + } + + /* #ifndef APP-NVUE */ + :host { + font-size: $u-loading-icon-host-font-size; + line-height: $u-loading-icon-host-line-height; + } + + .u-loading-icon { + &__spinner--spinner { + animation-timing-function: steps(12) + } + + &__text:empty { + display: none + } + + &--vertical &__text { + margin: $u-loading-icon-vertical-margin; + color: $u-content-color; + } + + &__dot { + position: absolute; + top: $u-loading-icon-dot-top; + left: $u-loading-icon-dot-left; + width: $u-loading-icon-dot-width; + height: $u-loading-icon-dot-height; + + &:before { + display: block; + width: $u-loading-icon-dot-before-width; + height: $u-loading-icon-dot-before-height; + margin: $u-loading-icon-dot-before-margin; + background-color: $u-loading-icon-dot-before-background-color; + border-radius: $u-loading-icon-dot-before-border-radius; + content: " " + } + } + } + + @for $i from 1 through 12 { + .u-loading-icon__dot:nth-of-type(#{$i}) { + transform: rotate($i * 30deg); + opacity: 1 - 0.0625 * ($i - 1); + } + } + + @keyframes u-rotate { + 0% { + transform: rotate(0deg) + } + + to { + transform: rotate(1turn) + } + } + + /* #endif */ +</style> -- Gitblit v1.8.0