Merge pull request #140 from Tencent/fix/loading-default-color

Fix(loading)/update default color
Tencent · Jan 21, 2022 · b864512 · b864512
2 parents bdcafa4 + ad5b36f
commit b864512
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 36 deletions.
diff --git a/example/pages/loading/loading.less b/example/pages/loading/loading.less
@@ -57,7 +57,7 @@ page {
 
 .text-info {
   margin-left: 24rpx;
-  color: rgba(0, 0, 0, .4);
+  color: rgba(0, 0, 0, 0.4);
 }
 
 .text-m {
@@ -72,6 +72,10 @@ page {
   color: #0052d9;
 }
 
+.indicator-black {
+  color: #000000 !important;
+}
+
 .text-blue {
   color: #0052d9;
 }

diff --git a/example/pages/loading/loading.ts b/example/pages/loading/loading.ts
@@ -1,13 +1,12 @@
 Page({
   data: {
-    isLoading: false,
     isCheck: false,
     duration: 800,
   },
 
   switchChange() {
-    const { isLoading } = this.data;
-    this.setData({ isLoading: !isLoading });
+    const { isCheck } = this.data;
+    this.setData({ isCheck: !isCheck });
   },
 
   durationChange(e) {

diff --git a/example/pages/loading/loading.wxml b/example/pages/loading/loading.wxml
@@ -7,27 +7,27 @@
   <t-demo title="01 类型">
     <view class="demo-section__desc">纯icon</view>
     <view class="loading-container-flex">
+      <t-loading theme="circular" size="40rpx" loading></t-loading>
       <t-loading
-        theme="circular"
+        theme="spinner"
         size="40rpx"
         loading
-        t-class-indicator="indicator-blue"
+        t-class-indicator="indicator-black"
       ></t-loading>
-      <t-loading theme="spinner" size="40rpx" loading></t-loading>
-      <t-loading theme="dots" size="80rpx" loading></t-loading>
+      <t-loading theme="dots" size="80rpx" loading t-class-indicator="indicator-black"></t-loading>
     </view>
     <view class="demo-section__desc">icon加文字横向</view>
     <view class="loading-container-flex">
+      <t-loading theme="circular" size="40rpx" loading text="加载中..."></t-loading>
       <t-loading
-        theme="circular"
+        theme="spinner"
         size="40rpx"
         loading
         text="加载中..."
-        t-class-indicator="indicator-blue"
+        t-class-indicator="indicator-black"
       ></t-loading>
-      <t-loading theme="spinner" size="40rpx" loading text="加载中..."></t-loading>
-      <t-loading theme="circular" size="40rpx" loading style="color: #0052d9">
-        <span slot="text">加载中...</span>
+      <t-loading theme="circular" size="40rpx" loading>
+        <span slot="text" style="color: #0052d9">加载中...</span>
       </t-loading>
     </view>
     <view class="demo-section__desc">icon加文字竖向</view>
@@ -37,7 +37,6 @@
       size="40rpx"
       loading
       text="加载中"
-      t-class-indicator="indicator-blue"
       layout="vertical"
     ></t-loading>
     <view class="demo-section__desc">纯文字</view>
@@ -55,21 +54,20 @@
       <t-switch
         value="{{isCheck}}"
         bindchange="switchChange"
-        colors="{{['#00A870', 'rgba(0,0,0,0.26)']}}"
+        colors="{{['#00A870']}}"
         slot="note"
       />
       <span class="text-info">
-        {{isLoading?'请求发起，延迟显示loading加载':'请求结束，隐藏loading加载'}}
+        {{isCheck?'请求发起，延迟显示loading加载':'请求结束，隐藏loading加载'}}
       </span>
     </view>
     <t-loading
       class="loading-style"
       theme="circular"
       size="40rpx"
       text="加载中..."
-      loading="{{isLoading}}"
+      loading="{{isCheck}}"
       delay="{{1000}}"
-      t-class-indicator="indicator-blue"
     ></t-loading>
   </t-demo>
 
@@ -81,7 +79,6 @@
         text="加载中..."
         loading
         t-class-text="text-l"
-        t-class-indicator="indicator-blue"
         duration="{{duration}}"
       ></t-loading>
     </view>
@@ -101,28 +98,20 @@
   <t-demo title="04 规格">
     <view class="demo-section__desc">支持自定义加载规格</view>
     <view class="loading-container-flex-column">
-      <t-loading
-        theme="circular"
-        size="40rpx"
-        text="加载中(小)..."
-        loading
-        t-class-indicator="indicator-blue"
-      ></t-loading>
+      <t-loading theme="circular" size="40rpx" text="加载中(小)..." loading></t-loading>
       <t-loading
         theme="circular"
         size="48rpx"
         text="加载(中)..."
         loading
         t-class-text="text-m"
-        t-class-indicator="indicator-blue"
       ></t-loading>
       <t-loading
         theme="circular"
         size="52rpx"
         text="加载中(大)..."
         loading
         t-class-text="text-l"
-        t-class-indicator="indicator-blue"
       ></t-loading>
     </view>
   </t-demo>

diff --git a/src/loading/loading.less b/src/loading/loading.less
@@ -1,6 +1,6 @@
 @import '../common/style/index.less';
 
-@loading: ~"@{prefix}-loading";
+@loading: ~'@{prefix}-loading';
 
 .@{loading} {
   display: inline-flex;
@@ -14,7 +14,8 @@
     height: 100%;
     max-width: 100%;
     max-height: 100%;
-    animation: rotate .8s linear infinite;
+    animation: rotate 0.8s linear infinite;
+    color: #0052d9;
 
     &.reverse {
       animation-name: rotateReverse;
@@ -105,7 +106,7 @@
   &__bar {
     height: 6rpx;
     width: 80%;
-    transition: .5s;
+    transition: 0.5s;
     background-color: #0052d9;
     display: none;
 
@@ -191,22 +192,22 @@
 
 @keyframes dotting {
   0% {
-    opacity: .4;
+    opacity: 0.4;
   }
 
   1% {
-    opacity: .8;
+    opacity: 0.8;
   }
 
   33% {
-    opacity: .8;
+    opacity: 0.8;
   }
 
   34% {
-    opacity: .4;
+    opacity: 0.4;
   }
 
   100% {
-    opacity: .4;
+    opacity: 0.4;
   }
 }