[improvement] NoticeBar: 性能优化

packages/notice-bar/index.less

@@ -30,10 +30,10 @@
   }
 
   &__content-wrap {
-    flex: 1;
+    position: relative;
     height: 24px;
     overflow: hidden;
-    position: relative;
+    flex: 1;
   }
 
   &__content {

packages/notice-bar/index.ts

@@ -49,13 +49,7 @@ VantComponent({
 
   data: {
     show: true,
-    hasRightIcon: false,
-    width: undefined,
-    wrapWidth: undefined,
-    elapse: undefined,
-    animation: null,
-    resetAnimation: null,
-    timer: null
+    hasRightIcon: false
   },
 
   watch: {
@@ -70,89 +64,82 @@ VantComponent({
         hasRightIcon: true
       });
     }
+
+    this.resetAnimation = wx.createAnimation({
+      duration: 0,
+      timingFunction: 'linear'
+    });
   },
 
   destroyed() {
-    const { timer } = this.data;
-    timer && clearTimeout(timer);
+    this.timer && clearTimeout(this.timer);
   },
 
   methods: {
     init() {
-      this.getRect('.van-notice-bar__content').then(rect => {
-        if (!rect || !rect.width) {
+      Promise.all([
+        this.getRect('.van-notice-bar__content'),
+        this.getRect('.van-notice-bar__content-wrap')
+      ]).then((rects: BoundingClientRect[]) => {
+        const [contentRect, wrapRect] = rects;
+        if (
+          contentRect == null ||
+          wrapRect == null ||
+          !contentRect.width ||
+          !wrapRect.width
+        ) {
           return;
         }
-        this.set({
-          width: rect.width
-        });
 
-        this.getRect('.van-notice-bar__content-wrap').then(rect => {
-          if (!rect || !rect.width) {
-            return;
-          }
+        const { speed, scrollable, delay } = this.data;
 
-          const wrapWidth = rect.width;
-          const {
-            width, speed, scrollable, delay
-          } = this.data;
+        if (scrollable && wrapRect.width < contentRect.width) {
+          const duration = (contentRect.width / speed) * 1000;
 
-          if (scrollable && wrapWidth < width) {
-            const elapse = width / speed * 1000;
-            const animation = wx.createAnimation({
-              duration: elapse,
-              timeingFunction: 'linear',
-              delay
-            });
-            const resetAnimation = wx.createAnimation({
-              duration: 0,
-              timeingFunction: 'linear'
-            });
+          this.wrapWidth = wrapRect.width;
+          this.contentWidth = contentRect.width;
+          this.duration = duration;
+          this.animation = wx.createAnimation({
+            duration,
+            timingFunction: 'linear',
+            delay
+          });
 
-            this.set({
-              elapse,
-              wrapWidth,
-              animation,
-              resetAnimation
-            }, () => {
-              this.scroll();
-            });
-          }
-        });
+          this.scroll();
+        }
       });
     },
 
     scroll() {
-      const {
-        animation, resetAnimation, wrapWidth, elapse, speed
-      } = this.data;
-      resetAnimation.translateX(wrapWidth).step();
-      const animationData = animation.translateX(-(elapse * speed) / 1000).step();
+      this.timer && clearTimeout(this.timer);
+      this.timer = null;
+
       this.set({
-        animationData: resetAnimation.export()
+        animationData: this.resetAnimation
+          .translateX(this.wrapWidth)
+          .step()
+          .export()
       });
+
       setTimeout(() => {
         this.set({
-          animationData: animationData.export()
+          animationData: this.animation
+            .translateX(-this.contentWidth)
+            .step()
+            .export()
         });
-      }, 100);
+      }, 20);
 
-      const timer = setTimeout(() => {
+      this.timer = setTimeout(() => {
         this.scroll();
-      }, elapse);
-
-      this.set({
-        timer
-      });
+      }, this.duration);
     },
 
     onClickIcon() {
-      const { timer } = this.data;
-      timer && clearTimeout(timer);
-      this.set({
-        show: false,
-        timer: null
-      });
+      this.timer && clearTimeout(this.timer);
+      this.timer = null;
+
+      this.set({ show: false });
     },
 
     onClick(event: Weapp.Event) {

packages/notice-bar/index.wxml

@@ -1,7 +1,7 @@
 <view
   wx:if="{{ show }}"
   class="custom-class van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
-  style="color: {{ color }};background-color: {{ backgroundColor }}"
+  style="color: {{ color }}; background-color: {{ backgroundColor }};"
   bind:tap="onClick"
 >
   <view wx:if="{{ leftIcon }}" class="van-notice-bar__left-icon">
@@ -13,19 +13,17 @@
     </view>
   </view>
 
-  <block wx:if="{{ mode }}">
-    <van-icon
-      wx:if="{{ mode === 'closeable' }}"
-      class="van-notice-bar__right-icon"
-      name="cross"
-      bind:tap="onClickIcon"
-    />
-    <navigator
-      wx:if="{{ mode === 'link' }}"
-      url="{{ url }}"
-      open-type="{{ openType }}"
-    >
-      <van-icon class="van-notice-bar__right-icon" name="arrow" />
-    </navigator>
-  </block>
+  <van-icon
+    wx:if="{{ mode === 'closeable' }}"
+    class="van-notice-bar__right-icon"
+    name="cross"
+    bind:tap="onClickIcon"
+  />
+  <navigator
+    wx:if="{{ mode === 'link' }}"
+    url="{{ url }}"
+    open-type="{{ openType }}"
+  >
+    <van-icon class="van-notice-bar__right-icon" name="arrow" />
+  </navigator>
 </view>