fix: trackStyle改为wxs

Author: jarmywang

src/tabs/tabs.ts

@@ -68,7 +68,7 @@ export default class Tabs extends SuperComponent {
     tabs: [],
     currentLabels: [],
     currentIndex: -1,
-    trackStyle: [],
+    trackOption: { lineWidth: 0, distance: 0, isInit: true },
     offset: 0,
     scrollLeft: 0,
     tabID: '',
@@ -193,7 +193,6 @@ export default class Tabs extends SuperComponent {
     },
 
     async setTrack() {
-      // if (!this.properties.showBottomLine) return;
       const { children } = this;
       if (!children) return;
       const { currentIndex } = this.data;
@@ -226,26 +225,16 @@ export default class Tabs extends SuperComponent {
           getObserver(this, `.${name}`).then(() => this.setTrack());
         }
 
-        const trackLineWidth = await this.getTrackSize();
+        const lineWidth = await this.getTrackSize();
         if (this.data.theme === 'line') {
-          distance += (rect.width - trackLineWidth) / 2;
+          distance += (rect.width - lineWidth) / 2;
         }
-        const trackStyle = [
-          `-webkit-transform: translateX(${distance}px)`,
-          `transform: translateX(${distance}px)`,
-          `width:${trackLineWidth}px`,
-          'opacity: 1',
-        ];
-        // 初始快速定位track位置
-        if (this.data.trackStyle.length === 0) {
+
+        const isInit = this.previousIndex === undefined;
+        if (isInit || this.previousIndex !== currentIndex) {
           this.previousIndex = currentIndex;
-          trackStyle.push('transition-duration: 0');
-          this.setData({ trackStyle });
-        } else if (this.previousIndex !== currentIndex) {
-            this.previousIndex = currentIndex;
-            trackStyle.push('transition-duration: 0.3s');
-            this.setData({ trackStyle });
-          }
+          this.setData({ trackOption: { lineWidth, distance, isInit } });
+        }
       } catch (err) {
         this.triggerEvent('error', err);
       }

src/tabs/tabs.wxml

@@ -1,6 +1,6 @@
 <import src="../common/template/badge.wxml" />
 <import src="../common/template/icon.wxml" />
-<wxs src="./tabs.wxs" module="filters" />
+<wxs src="./tabs.wxs" module="_tabs" />
 <wxs src="../common/utils.wxs" module="_" />
 
 <view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [placement])}} class {{prefix}}-class">
@@ -58,7 +58,7 @@
           <view
             wx:if="{{theme == 'line' && showBottomLine}}"
             class="{{_.cls(classPrefix + '__track', [placement])}} {{prefix}}-class-track"
-            style="{{_._style(trackStyle)}}"
+            style="{{_tabs.trackStyle(trackOption)}}"
           />
         </view>
       </scroll-view>
@@ -74,7 +74,7 @@
   >
     <view
       class="{{classPrefix}}__content-inner {{prefix}}-class-content"
-      style="{{ filters.animate({duration: animation.duration, currentIndex:currentIndex}) }}"
+      style="{{ _tabs.animate({duration: animation.duration, currentIndex:currentIndex}) }}"
     >
       <slot />
     </view>

src/tabs/tabs.wxs

@@ -1,14 +1,29 @@
-function animate(options) {
-  var result = [];
+var utils = require('../common/utils.wxs');
 
+function animate(options) {
   if (options.duration) {
-    result.push('transition-duration: ' + options.duration + 's');
-    result.push('transform: translate3d( ' + -100 * options.currentIndex + '%,0, 0)');
+    return utils._style({
+      'transition-duration': options.duration + 's',
+      transform: 'translate3d( ' + -100 * options.currentIndex + '%,0, 0)',
+    });
   }
+  return '';
+}
 
-  return result.join(';');
+function trackStyle(options) {
+  if (options.distance) {
+    return utils._style({
+      '-webkit-transform': 'translateX(' + options.distance + 'px)',
+      transform: 'translateX(' + options.distance + 'px)',
+      'transition-duration': options.isInit ? '0' : '0.3s',
+      width: options.lineWidth,
+      opacity: 1,
+    });
+  }
+  return '';
 }
 
 module.exports = {
   animate: animate,
+  trackStyle: trackStyle,
 };