fix: 微信端noticebar循环失效 (#1218)

Author: rayhomie

compiled/alipay/src/NoticeBar/index.ts

@@ -98,14 +98,16 @@ Component(
         marqueeStyle,
       });
     },
+
     onTransitionEnd() {
       const loop = getValueFromProps(this, 'loop');
       const trailing = 200;
       if (loop) {
-        setTimeout(() => {
+        const timer = setTimeout(() => {
           this.measureText((state) => {
             this.resetMarquee.call(this, state);
           });
+          clearTimeout(timer);
         }, trailing);
       }
     },
@@ -130,7 +132,6 @@ Component(
       const { enableMarquee } = this.props;
       // 这里更新处理的原因是防止notice内容在动画过程中发生改变。
       if (enableMarquee) {
-        console.log(enableMarquee);
         this.measureText((state) => {
           this.startMarquee.call(this, state);
         });

compiled/wechat/src/NoticeBar/index.js

@@ -67,12 +67,25 @@ Component(NoticeBarDefaultProps, {
         }
     },
     startMarquee: function (state) {
+        var _this = this;
         var loop = getValueFromProps(this, 'loop');
         var leading = 500;
         var duration = state.duration, overflowWidth = state.overflowWidth, viewWidth = state.viewWidth;
         var marqueeScrollWidth = overflowWidth;
         if (loop) {
             marqueeScrollWidth = overflowWidth + viewWidth;
+            // 微信的view标签不支持onTransitionEnd，需要这里实现循环
+            var trailing = 200;
+            clearTimeout(this.timer);
+            this.timer = setTimeout(function () {
+                _this.measureText(function (state) {
+                    _this.resetMarquee.call(_this, state);
+                    _this.measureText(function (state) {
+                        _this.startMarquee.call(_this, state);
+                    });
+                });
+                clearTimeout(_this.timer);
+            }, trailing + duration * 1000);
         }
         var newMarqueeStyle = "transform: translate3d(".concat(-marqueeScrollWidth, "px, 0, 0); transition: ").concat(duration, "s all linear ").concat(typeof leading === 'number' ? "".concat(leading / 1000, "s") : '0s', ";");
         this.setData({
@@ -129,18 +142,6 @@ Component(NoticeBarDefaultProps, {
             marqueeStyle: marqueeStyle,
         });
     },
-    onTransitionEnd: function () {
-        var _this = this;
-        var loop = getValueFromProps(this, 'loop');
-        var trailing = 200;
-        if (loop) {
-            setTimeout(function () {
-                _this.measureText(function (state) {
-                    _this.resetMarquee.call(_this, state);
-                });
-            }, trailing);
-        }
-    },
 }, {
     show: true,
     marqueeStyle: '',

src/NoticeBar/index.axml.tsx

@@ -66,7 +66,9 @@ export default (
             style={`${marqueeStyle} display: ${
               enableMarquee ? 'inline-block' : 'block'
             }`}
+            // #if ALIPAY
             onTransitionEnd="onTransitionEnd"
+            // #endif
           >
             <Slot />
           </View>

src/NoticeBar/index.ts

@@ -47,6 +47,20 @@ Component(
       let marqueeScrollWidth = overflowWidth;
       if (loop) {
         marqueeScrollWidth = overflowWidth + viewWidth;
+        /// #if WECHAT
+        // 微信的view标签不支持onTransitionEnd，需要这里实现循环
+        const trailing = 200;
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          this.measureText((state) => {
+            this.resetMarquee.call(this, state);
+            this.measureText((state) => {
+              this.startMarquee.call(this, state);
+            });
+          });
+          clearTimeout(this.timer);
+        }, trailing + duration * 1000);
+        /// #endif
       }
       const newMarqueeStyle = `transform: translate3d(${-marqueeScrollWidth}px, 0, 0); transition: ${duration}s all linear ${
         typeof leading === 'number' ? `${leading / 1000}s` : '0s'
@@ -100,17 +114,21 @@ Component(
         marqueeStyle,
       });
     },
+
+    /// #if ALIPAY
     onTransitionEnd() {
       const loop = getValueFromProps(this, 'loop');
       const trailing = 200;
       if (loop) {
-        setTimeout(() => {
+        const timer = setTimeout(() => {
           this.measureText((state) => {
             this.resetMarquee.call(this, state);
           });
+          clearTimeout(timer);
         }, trailing);
       }
     },
+    /// #endif
   },
   {
     show: true,
@@ -133,7 +151,6 @@ Component(
       const { enableMarquee } = this.props;
       // 这里更新处理的原因是防止notice内容在动画过程中发生改变。
       if (enableMarquee) {
-        console.log(enableMarquee);
         this.measureText((state) => {
           this.startMarquee.call(this, state);
         });