小程序diamante

jiangping

2023-10-26 627c3e0a6920131d75eafa4646db373ccc936546

 minipro_standard/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>