fix(h5): 修复h5下onPullToRefresh缺少loading动画

NervJS · Aug 12, 2019 · c967b81 · c967b81
1 parent cb2d9f2
commit c967b81
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 12 deletions.
diff --git a/packages/taro-components/src/components/pull-down-refresh/index.js b/packages/taro-components/src/components/pull-down-refresh/index.js
@@ -248,16 +248,24 @@ class PullToRefresh extends Nerv.Component {
         render={() => children} />
     )
 
-    const renderRefresh = (cls) => {
-      const cla = classNames(cls, !this.state.dragOnEdge && `${prefixCls}-transition`)
+    const renderRefresh = cls => {
+      const { currSt, dragOnEdge } = this.state
+      const cla = classNames(cls, !dragOnEdge && `${prefixCls}-transition`)
+      const showIndicator = currSt === 'activate' || currSt === 'release'
       return (
         <div className={`${prefixCls}-content-wrapper`}>
-          <div className={cla} ref={el => {
-            this.contentRef = el
-          }}>
-            {/* <div className={`${prefixCls}-indicator`}>
-              {(indicator)[this.state.currSt] || (INDICATOR)[this.state.currSt]}
-            </div> */}
+          <div
+            className={cla}
+            ref={el => {
+              this.contentRef = el
+            }}>
+            {showIndicator && (
+              <div className={`${prefixCls}-indicator`}>
+                <div />
+                <div />
+                <div />
+              </div>
+            )}
             {renderChildren}
           </div>
         </div>

diff --git a/packages/taro-components/src/components/pull-down-refresh/style/index.css b/packages/taro-components/src/components/pull-down-refresh/style/index.css
@@ -9,13 +9,41 @@
   transition: transform 0.3s;
 }
 
+
+@keyframes rmc-pull-to-refresh-indicator {
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .rmc-pull-to-refresh-indicator {
-  color: grey;
   text-align: center;
-  height: 25px;
-  line-height: 25px;
+  height: 30px;
+  line-height: 10px;
 }
 
+.rmc-pull-to-refresh-indicator > div {
+  background-color: grey;
+  width: 6px;
+  height: 6px;
+  border-radius: 100%;
+  margin: 3px;
+  animation-fill-mode: both;
+  display: inline-block;
+  animation: rmc-pull-to-refresh-indicator 0.5s 0s infinite linear;
+}
+.rmc-pull-to-refresh-indicator > div:nth-child(0) {
+  animation-delay: -0.1s !important;
+}
+.rmc-pull-to-refresh-indicator > div:nth-child(1) {
+  animation-delay: -0.2s !important;
+}
+.rmc-pull-to-refresh-indicator > div:nth-child(2) {
+  animation-delay: -0.3s !important;
+}
 .rmc-pull-to-refresh-down .rmc-pull-to-refresh-indicator {
   margin-top: -25px;
-}
+}