perf(tab): improve wxs style assemble & export resize methods (#3827)

fix #3676
youzan · Dec 9, 2020 · 0cd64e9 · 0cd64e9
1 parent 1104e07
commit 0cd64e9
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 145 deletions.
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <van-overlay
   wx:if="{{ overlay }}"
@@ -11,7 +12,7 @@
 <view
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safe: safeAreaInsetBottom, safeTop: safeAreaInsetTop }]) }}"
-  style="z-index: {{ zIndex }}; -webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }};{{ customStyle }}"
+  style="{{ computed.popupClass({ zIndex, currentDuration, display, customStyle }) }}"
   bind:transitionend="onTransitionEnd"
 >
   <slot />

diff --git a/packages/popup/index.wxs b/packages/popup/index.wxs
@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function popupClass(data) {
+  return style([
+    {
+      'z-index': data.zIndex,
+      '-webkit-transition-duration': data.currentDuration + 'ms',
+      'transition-duration': data.currentDuration + 'ms',
+    },
+    data.display ? null : 'display: none',
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  popupClass: popupClass,
+};
diff --git a/packages/sticky/index.wxs b/packages/sticky/index.wxs
@@ -1,37 +1,24 @@
 /* eslint-disable */
-function wrapStyle(data) {
-  var style = '';
-
-  if (data.transform) {
-    style += 'transform: translate3d(0, ' + data.transform + 'px, 0);';
-  }
-
-  if (data.fixed) {
-    style += 'top: ' + data.offsetTop + 'px;';
-  }
-
-  if (data.zIndex) {
-    style += 'z-index: ' + data.zIndex + ';';
-  }
+var style = require('../wxs/style.wxs');
 
-  return style;
+function wrapStyle(data) {
+  return style({
+    transform: data.transform
+      ? 'translate3d(0, ' + data.transform + 'px, 0)'
+      : '',
+    top: data.fixed ? data.offsetTop + 'px' : '',
+    'z-index': data.zIndex,
+  });
 }
 
 function containerStyle(data) {
-  var style = '';
-
-  if (data.fixed) {
-    style += 'height: ' + data.height + 'px;';
-  }
-
-  if (data.zIndex) {
-    style += 'z-index: ' + data.zIndex + ';';
-  }
-
-  return style;
+  return style({
+    height: data.fixed ? data.height + 'px' : '',
+    'z-index': data.zIndex,
+  });
 }
 
 module.exports = {
   wrapStyle: wrapStyle,
-  containerStyle: containerStyle
+  containerStyle: containerStyle,
 };
diff --git a/packages/tab/README.md b/packages/tab/README.md
@@ -181,38 +181,64 @@ Page({
 </van-popup>
 ```
 
+## 常见问题
+
+### 组件从隐藏状态切换到显示状态时，底部条位置错误？
+
+Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。
+
+#### 解决方法
+
+方法一，使用 `v-if` 来控制组件展示，使组件重新初始化：
+
+```html
+<van-tabs v-if="show" />
+```
+
+方法二，调用组件的 resize 方法来主动触发重绘：
+
+```html
+<van-tabs id="tabs" />
+```
+
+```js
+this.selectComponent('#tabs').resize();
+```
+
 ## API
 
 ### Tabs Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| active | 当前选中标签的标识符 | _string \| number_ | `0` | - |
-| color | 标签颜色 | _string_ | `#ee0a24` | - |
-| z-index | z-index 层级 | _number_ | `1` | - |
-| type | 样式风格，可选值为`card` | _string_ | `line` | - |
-| border | 是否展示外边框，仅在 `line` 风格下生效 | _boolean_ | `false` | - |
-| duration | 动画时间 (单位秒) | _number_ | `0.3` | - |
-| line-width | 底部条宽度 (px) | _string \| number_ | `40px` | - |
-| line-height | 底部条高度 (px) | _string \| number_ | `3px` | - |
-| swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | _number_ | `5` | - |
-| animated | 是否使用动画切换 Tabs | _boolean_ | `false` | - |
-| ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` | - |
-| sticky | 是否使用粘性定位布局 | _boolean_ | `false` | - |
-| swipeable | 是否开启手势滑动切换 | _boolean_ | `false` | - |
-| lazy-render | 是否开启标签页内容延迟渲染 | _boolean_ | `true` | - |
-| offset-top | 粘性定位布局下与顶部的最小距离，单位`px` | _number_ | - | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 样式风格，可选值为`card` | _string_ | `line` |
+| color | 标签主题色 | _string_ | `#ee0a24` |
+| active | 当前选中标签的标识符 | _string \| number_ | `0` |
+| duration | 动画时间，单位秒 | _number_ | `0.3` |
+| line-width | 底部条宽度，默认单位`px` | _string \| number_ | `40px` |
+| line-height | 底部条高度，默认单位`px` | _string \| number_ | `3px` |
+| animated | 是否开启切换标签内容时的转场动画 | _boolean_ | `false` |
+| border | 是否展示外边框，仅在 `line` 风格下生效 | _boolean_ | `false` |
+| ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` |
+| sticky | 是否使用粘性定位布局 | _boolean_ | `false` |
+| swipeable | 是否开启手势滑动切换 | _boolean_ | `false` |
+| lazy-render | 是否开启标签页内容延迟渲染 | _boolean_ | `true` |
+| offset-top | 粘性定位布局下与顶部的最小距离，单位`px` | _number_ | - |
+| swipe-threshold | 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | _number_ | `5` |
+| title-active-color | 标题选中态颜色 | _string_ | - |
+| title-inactive-color | 标题默认态颜色 | _string_ | - |
+| z-index | z-index 层级 | _number_ | `1` |
 
 ### Tab Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| name | 标签名称，作为匹配的标识符 | _string \| number_ | 标签的索引值 | - |
-| title | 标题 | _string_ | - | - |
-| disabled | 是否禁用标签 | _boolean_ | `false` | - |
-| dot | 是否显示小红点 | _boolean_ | - | - |
-| info | 图标右上角提示信息 | _string \| number_ | - | - |
-| title-style | 自定义标题样式 | _string_ | - | - |
+| 参数        | 说明                       | 类型               | 默认值       |
+| ----------- | -------------------------- | ------------------ | ------------ |
+| name        | 标签名称，作为匹配的标识符 | _string \| number_ | 标签的索引值 |
+| title       | 标题                       | _string_           | -            |
+| disabled    | 是否禁用标签               | _boolean_          | `false`      |
+| dot         | 是否显示小红点             | _boolean_          | -            |
+| info        | 图标右上角提示信息         | _string \| number_ | -            |
+| title-style | 自定义标题样式             | _string_           | -            |
 
 ### Tabs Slot
 
@@ -244,3 +270,11 @@ Page({
 | nav-class        | 标签栏样式类     |
 | tab-class        | 标签样式类       |
 | tab-active-class | 标签激活态样式类 |
+
+### 方法
+
+通过 selectComponent 可以获取到 Tabs 实例并调用实例方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+| --- | --- | --- | --- |
+| resize | - | - | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 |
diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts
@@ -46,7 +46,7 @@ VantComponent({
     lineWidth: {
       type: [String, Number],
       value: 40,
-      observer: 'setLine',
+      observer: 'resize',
     },
     lineHeight: {
       type: [String, Number],
@@ -110,7 +110,7 @@ VantComponent({
 
   mounted() {
     wx.nextTick(() => {
-      this.setLine(true);
+      this.resize(true);
       this.scrollIntoView();
     });
   },
@@ -201,7 +201,7 @@ VantComponent({
       this.setData({ currentIndex });
 
       wx.nextTick(() => {
-        this.setLine();
+        this.resize();
         this.scrollIntoView();
         this.updateContainer();
 
@@ -220,7 +220,7 @@ VantComponent({
       }
     },
 
-    setLine(skipTransition = false) {
+    resize(skipTransition = false) {
       if (this.data.type !== 'line') {
         return;
       }

diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml
@@ -1,5 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./index.wxs" module="getters" />
+<wxs src="./index.wxs" module="computed" />
 
 <view class="custom-class {{ utils.bem('tabs', [type]) }}">
   <van-sticky
@@ -19,14 +19,14 @@
         class="{{ utils.bem('tabs__scroll', [type]) }}"
         style="{{ color ? 'border-color: ' + color : '' }}"
       >
-        <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
-          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ getters.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth }) }}" />
+        <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ computed.navStyle(color, type) }}">
+          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ computed.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth }) }}" />
           <view
             wx:for="{{ tabs }}"
             wx:key="index"
             data-index="{{ index }}"
-            class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
-            style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}"
+            class="{{ computed.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
+            style="{{ computed.tabStyle({ active: index === currentIndex, ellipsis, color, type, disabled: item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable }) }}"
             bind:tap="onTap"
           >
             <view class="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}">
@@ -55,7 +55,7 @@
   >
     <view
       class="{{ utils.bem('tabs__track', [{ animated }]) }} van-tabs__track"
-      style="{{ getters.trackStyle({ duration, currentIndex, animated }) }}"
+      style="{{ computed.trackStyle({ duration, currentIndex, animated }) }}"
     >
       <slot />
     </view>