[new feature] Tab: refactor component & add new slot

支持 #1316

pull request 改动点:

* refactor sticky implementation
* improve performance
* add new slot left-nav & right-nav

example/pages/tab/index.js

@@ -20,6 +20,13 @@ Page({
     });
   },
 
+  onClickNavRight() {
+    wx.showToast({
+      title: '点击right nav',
+      icon: 'none'
+    });
+  },
+
   onClick(event) {
     wx.showToast({
       title: `点击标签 ${event.detail.index + 1}`,

example/pages/tab/index.wxml

@@ -14,6 +14,12 @@
 
 <demo-block title="自定义标题">
   <van-tabs active="{{ 1 }}" bind:change="onChange">
+    <van-icon
+      slot="nav-right"
+      name="search"
+      custom-class="right-nav"
+      bind:click="onClickNavRight"
+    />
     <van-tab
       wx:for="1234"
       wx:key="index"
@@ -87,7 +93,7 @@
 </demo-block>
 
 <demo-block title="粘性布局">
-  <van-tabs sticky scroll-top="{{ scrollTop }}">
+  <van-tabs sticky>
     <van-tab
       wx:for="1234"
       wx:key="index"

example/pages/tab/index.wxss

@@ -6,3 +6,8 @@
 .content-2 {
   padding: 20px;
 }
+
+.right-nav {
+  padding: 0 10px;
+  line-height: 44px !important;
+}

packages/mixins/basic.ts

@@ -4,7 +4,7 @@ export const basic = Behavior({
       this.triggerEvent.apply(this, arguments);
     },
 
-    getRect(selector, all) {
+    getRect(selector: string, all: boolean) {
       return new Promise(resolve => {
         wx.createSelectorQuery()
           .in(this)[all ? 'selectAll' : 'select'](selector)

packages/tab/README.md

@@ -116,7 +116,7 @@ Page({
 通过`sticky`属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶
 
 ```html
-<van-tabs sticky scroll-top="{{ scrollTop }}">
+<van-tabs sticky>
   <van-tab title="标签 1">内容 1</van-tab>
   <van-tab title="标签 2">内容 2</van-tab>
   <van-tab title="标签 3">内容 3</van-tab>
@@ -124,19 +124,6 @@ Page({
 </van-tabs>
 ```
 
-```javascript
-Page({
-  data: {
-    scrollTop: 0
-  },
-  onPageScroll(event) {
-    this.setData({
-      scrollTop: event.scrollTop
-    });
-  }
-});
-```
-
 #### 切换动画
 
 可以通过`animated`来设置是否启用切换tab时的动画。
@@ -178,7 +165,6 @@ Page({
 | animated | 是否使用动画切换 Tabs | `Boolean` | `false` |
 | swipeable | 是否开启手势滑动切换 | `Boolean` | `false` |
 | sticky | 是否使用粘性定位布局 | `Boolean` | `false` |
-| offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` |
 
 ### Tab API
 
@@ -190,6 +176,13 @@ Page({
 | info | 图标右上角提示信息 | `String | Number` | - |
 | title-style | 自定义标题样式 | `String` | - |
 
+### Tabs Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| nav-left | 标题左侧内容 |
+| nav-right | 标题右侧内容 |
+
 ### Tab Slot
 
 | 名称 | 说明 |
@@ -210,15 +203,3 @@ Page({
 | 类名 | 说明 |
 |-----------|-----------|
 | custom-class | 根节点样式类 |
-
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.3.0 | feature | 新增组件 |
-| 0.3.2 | bugfix | 修复部分情况下代码报错的问题 |
-| 0.3.2 | bugfix | 修复 color 属性会改变未激活标签的颜色的问题 |
-| 0.3.3 | feature | 新增 border 属性 |
-| 0.3.3 | feature | 支持传入外部样式类 |
-| 0.3.5 | bugfix | 修复 active 属性默认值错误的问题 |
-| 0.3.7 | feature | 新增 z-index 属性 |

packages/tabs/index.less

@@ -12,6 +12,8 @@
     top: 0;
     right: 0;
     left: 0;
+    display: flex;
+    background-color: @white;
 
     &--page-top {
       position: fixed;
@@ -37,7 +39,6 @@
   &__nav {
     position: relative;
     display: flex;
-    background-color: @white;
     user-select: none;
 
     &--line {

packages/tabs/index.ts

@@ -2,12 +2,14 @@ import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
 
 type TabItemData = {
-  width?: number;
+  width?: number
-  active: boolean;
+  active: boolean
-  inited?: boolean;
+  inited?: boolean
-  animated?: boolean;
+  animated?: boolean
 };
 
+type Position = 'top' | 'bottom' | '';
+
 VantComponent({
   mixins: [touch],
 
@@ -67,10 +69,6 @@ VantComponent({
     offsetTop: {
       type: Number,
       value: 0
-    },
-    scrollTop: {
-      type: Number,
-      value: 0
     }
   },
 
@@ -95,7 +93,6 @@ VantComponent({
     lineHeight: 'setLine',
     active: 'setActiveTab',
     animated: 'setTrack',
-    scrollTop: 'onScroll',
     offsetTop: 'setWrapStyle'
   },
 
@@ -107,6 +104,11 @@ VantComponent({
     this.setLine(true);
     this.setTrack();
     this.scrollIntoView();
+
+    this.getRect('.van-tabs__wrap').then((rect: BoundingClientRect) => {
+      this.navHeight = rect.height;
+      this.observerContentScroll();
+    });
   },
 
   destroyed() {
@@ -114,7 +116,7 @@ VantComponent({
   },
 
   methods: {
-    updateTabs(tabs) {
+    updateTabs(tabs: TabItemData[]) {
       tabs = tabs || this.data.tabs;
       this.set({
         tabs,
@@ -153,17 +155,11 @@ VantComponent({
         return;
       }
 
-      const {
+      const { color, active, duration, lineWidth, lineHeight } = this.data;
-        color,
-        active,
-        duration,
-        lineWidth,
-        lineHeight
-      } = this.data;
 
-      this.getRect('.van-tab', true).then(rects => {
+      this.getRect('.van-tab', true).then((rects: BoundingClientRect[]) => {
         const rect = rects[active];
-        const width = (lineWidth !== -1) ? lineWidth : rect.width / 2;
+        const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
         const height = lineHeight !== -1 ? `height: ${lineHeight}px;` : '';
 
         let left = rects
@@ -172,7 +168,9 @@ VantComponent({
 
         left += (rect.width - width) / 2;
 
-        const transition = skipTransition ? '' : `transition-duration: ${duration}s; -webkit-transition-duration: ${duration}s;`;
+        const transition = skipTransition
+          ? ''
+          : `transition-duration: ${duration}s; -webkit-transition-duration: ${duration}s;`;
 
         this.set({
           lineStyle: `
@@ -188,15 +186,11 @@ VantComponent({
     },
 
     setTrack() {
-      const {
+      const { animated, active, duration } = this.data;
-        animated,
-        active,
-        duration
-      } = this.data;
 
       if (!animated) return '';
 
-      this.getRect('.van-tabs__content').then(rect => {
+      this.getRect('.van-tabs__content').then((rect: BoundingClientRect) => {
         const { width } = rect;
 
         this.set({
@@ -204,24 +198,21 @@ VantComponent({
             width: ${width * this.child.length}px;
             left: ${-1 * active * width}px;
             transition: left ${duration}s;
+            display: -webkit-box;
             display: flex;
           `
         });
-        this.setTabsProps({
-          width,
-          animated
-        })
-      })
-    },
 
-    setTabsProps(props) {
+        const props = { width, animated };
-      this.child.forEach(item => {
+
+        this.child.forEach((item: Weapp.Component) => {
           item.set(props);
         });
+      });
     },
 
     setActiveTab() {
-      this.child.forEach((item, index) => {
+      this.child.forEach((item: Weapp.Component, index: number) => {
         const data: TabItemData = {
           active: index === this.data.active
         };
@@ -244,24 +235,27 @@ VantComponent({
 
     // scroll active tab into view
     scrollIntoView() {
-      if (!this.data.scrollable) {
+      const { active, scrollable } = this.data;
+
+      if (!scrollable) {
         return;
       }
 
-      this.getRect('.van-tab', true).then(tabRects => {
+      Promise.all([
-        const tabRect = tabRects[this.data.active];
+        this.getRect('.van-tab', true),
+        this.getRect('.van-tabs__nav')
+      ]).then(
+        ([tabRects, navRect]: [BoundingClientRect[], BoundingClientRect]) => {
+          const tabRect = tabRects[active];
           const offsetLeft = tabRects
-          .slice(0, this.data.active)
+            .slice(0, active)
             .reduce((prev, curr) => prev + curr.width, 0);
-        const tabWidth = tabRect.width;
 
-        this.getRect('.van-tabs__nav').then(navRect => {
-          const navWidth = navRect.width;
           this.set({
-            scrollLeft: offsetLeft - (navWidth - tabWidth) / 2
+            scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2
-          });
-        });
           });
+        }
+      );
     },
 
     onTouchStart(event: Weapp.TouchEvent) {
@@ -295,8 +289,11 @@ VantComponent({
     },
 
     setWrapStyle() {
-      const { offsetTop, position } = this.data;
+      const { offsetTop, position } = this.data as {
-      let wrapStyle;
+        offsetTop: number
+        position: Position
+      };
+      let wrapStyle: string;
 
       switch (position) {
         case 'top':
@@ -318,44 +315,63 @@ VantComponent({
       // cut down `set`
       if (wrapStyle === this.data.wrapStyle) return;
 
-      this.set({
+      this.set({ wrapStyle });
-        wrapStyle
-      });
     },
 
-    // adjust tab position
+    observerContentScroll() {
-    onScroll(scrollTop) {
+      if (!this.data.sticky) {
-      if (!this.data.sticky) return;
+        return;
-
-      const { offsetTop } = this.data;
-
-      this.getRect('.van-tabs').then(rect => {
-        const { top, height } = rect;
-
-        this.getRect('.van-tabs__wrap').then(rect => {
-          const { height: wrapHeight } = rect;
-          let position = '';
-
-          if (offsetTop > top + height - wrapHeight) {
-            position = 'bottom';
-          } else if (offsetTop > top) {
-            position = 'top';
       }
 
+      const { offsetTop } = this.data;
+      const { windowHeight } = wx.getSystemInfoSync();
+
+      wx.createIntersectionObserver(this)
+        .relativeToViewport({ top: -this.navHeight })
+        .observe('.van-tabs', res => {
+          const { top } = res.boundingClientRect;
+
+          if (top > 0) {
+            return;
+          }
+
+          const position: Position =
+            res.intersectionRatio > 0 ? 'top' : 'bottom';
+
           this.$emit('scroll', {
-            scrollTop: scrollTop + offsetTop,
+            scrollTop: top + offsetTop,
             isFixed: position === 'top'
           });
 
+          this.setPosition(position);
+        });
+
+      wx.createIntersectionObserver(this)
+        .relativeToViewport({ bottom: -(windowHeight - 1) })
+        .observe('.van-tabs', res => {
+          const { top, bottom } = res.boundingClientRect;
+
+          if (bottom < this.navHeight) {
+            return;
+          }
+
+          const position: Position = res.intersectionRatio > 0 ? 'top' : '';
+
+          this.$emit('scroll', {
+            scrollTop: top + offsetTop,
+            isFixed: position === 'top'
+          });
+
+          this.setPosition(position);
+        });
+    },
+
+    setPosition(position: Position) {
       if (position !== this.data.position) {
-            this.set({
+        this.set({ position }).then(() => {
-              position
-            }, () => {
           this.setWrapStyle();
         });
       }
-        });
-      });
     }
   }
 });

packages/tabs/index.wxml

@@ -1,7 +1,9 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
-<view class="custom-class van-tabs van-tabs--{{ type }}">
+<view class="custom-class {{ utils.bem('tabs', [type]) }}">
-  <view style="z-index: {{ zIndex }}; {{ wrapStyle }}" class="van-tabs__wrap {{ scrollable ? 'van-tabs__wrap--scrollable' : '' }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
+  <view style="z-index: {{ zIndex }}; {{ wrapStyle }}" class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
+    <slot name="nav-left" />
+
     <scroll-view
       scroll-x="{{ scrollable }}"
       scroll-with-animation
@@ -30,6 +32,8 @@
         </view>
       </view>
     </scroll-view>
+
+    <slot name="nav-right" />
   </view>
   <view
     class="van-tabs__content"

types/wx.d.ts

@@ -74,19 +74,19 @@ interface AnimationOptions {
   /**
    * 动画持续时间，单位ms
    */
-  duration?: number
+  duration: number
   /**
    * 定义动画的效果
    */
-  timingFunction?: TimingFunction
+  timingFunction: TimingFunction
   /**
    * 动画延迟时间，单位 ms
    */
-  delay?: number
+  delay: number
   /**
    * 设置transform-origin
    */
-  transformOrigin?: string
+  transformOrigin: string
 }
 
 interface Animation {
@@ -98,7 +98,7 @@ interface Animation {
   /**
    * 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
    */
-  step(object: AnimationOptions): void
+  step(object: Partial<AnimationOptions>): void
 
   /**
    * 透明度，参数范围 0~1
@@ -226,27 +226,51 @@ interface FieldsOptions {
   /**
    * 是否返回节点 id
    */
-  id?: boolean
+  id: boolean
   /**
    * 是否返回节点 dataset
    */
-  dataset?: boolean
+  dataset: boolean
-  rect?: boolean
+  rect: boolean
-  size?: boolean
+  size: boolean
-  scrollOffset?: boolean
+  scrollOffset: boolean
-  properties?: string[]
+  properties: string[]
-  computedStyle?: string[]
+  computedStyle: string[]
-  context?: boolean
+  context: boolean
 }
 
 interface BoundingClientRect {
+  /**
+   * 节点的 ID
+   */
   id: string
+  /**
+   * 节点的 dataset
+   */
   dataset: object
+  /**
+   * 	节点的左边界坐标
+   */
   left: number
+  /**
+   * 节点的右边界坐标
+   */
   right: number
+  /**
+   * 	节点的上边界坐标
+   */
   top: number
+  /**
+   * 	节点的下边界坐标
+   */
   bottom: number
+  /**
+   * 	节点的宽度
+   */
   width: number
+  /**
+   * 	节点的高度
+   */
   height: number
 }
 
@@ -292,7 +316,7 @@ interface NodesRef {
   /**
    * 获取节点的相关信息。需要获取的字段在fields中指定。返回值是 nodesRef 对应的 selectorQuery
    */
-  fields(object: FieldsOptions): object
+  fields(object: Partial<FieldsOptions>): object
 
   /**
    * 添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。
@@ -342,15 +366,15 @@ interface ObserverOptions {
   /**
    * 一个数值数组，包含所有阈值。
    */
-  thresholds?: number[]
+  thresholds: number[]
   /**
    * 初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数。
    */
-  initialRatio?: number
+  initialRatio: number
   /**
    * 是否同时观测多个目标节点（而非一个），如果设为 true ，observe 的 targetSelector 将选中多个节点（注意：同时选中过多节点将影响渲染性能）
    */
-  observeAll?: boolean
+  observeAll: boolean
 }
 
 interface Margins {
@@ -381,12 +405,12 @@ interface IntersectionObserver {
   /**
    * 使用选择器指定一个节点，作为参照区域之一。
    */
-  relativeTo(selector: string, object: Margins): IntersectionObserver
+  relativeTo(selector: string, object: Partial<Margins>): IntersectionObserver
 
   /**
    * 指定页面显示区域作为参照区域之一
    */
-  relativeToViewport(object: Margins): IntersectionObserver
+  relativeToViewport(object?: Partial<Margins>): IntersectionObserver
 
   /**
    * 指定目标节点并开始监听相交状态变化情况
@@ -438,7 +462,7 @@ interface Wx {
   /**
    * 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
    */
-  createAnimation(object: AnimationOptions): Animation
+  createAnimation(object: Partial<AnimationOptions>): Animation
 
   /**
    * 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。
@@ -447,8 +471,46 @@ interface Wx {
 
   createIntersectionObserver(
     component: Weapp.Component,
-    options: ObserverOptions
+    options?: Partial<ObserverOptions>
   ): IntersectionObserver
+
+  /**
+   * 显示消息提示框
+   */
+  showToast(options: {
+  /**
+     * 提示的内容
+     */
+  title: string
+  /**
+     * 	图标
+     */
+  icon?: 'success' | 'loading' | 'none'
+  /**
+     * 自定义图标的本地路径，image 的优先级高于 icon
+     */
+  image?: string
+  /**
+     * 提示的延迟时间
+     */
+  duration?: number
+  /**
+     * 	是否显示透明蒙层，防止触摸穿透
+     */
+  mask?: boolean
+  /**
+     * 接口调用成功的回调函数
+     */
+  success?: () => void
+  /**
+     * 接口调用失败的回调函数
+     */
+  fail?: () => void
+  /**
+     * 接口调用结束的回调函数（调用成功、失败都会执行）
+     */
+  complete?: () => void
+  }): void
 }
 
 declare const wx: Wx;