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

支持 #1316 pull request 改动点: * refactor sticky implementation * improve performance * add new slot left-nav & right-nav
2025-04-06 03:58:05 +08:00 · 2019-02-25 10:11:35 +08:00 · 2019-02-25 10:11:35 +08:00 · 74cb663c85
commit 74cb663c85
parent 082fcbb0db
9 changed files with 211 additions and 129 deletions
--- a/example/pages/tab/index.js
+++ b/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}`,
--- a/example/pages/tab/index.wxml
+++ b/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"
--- a/example/pages/tab/index.wxss
+++ b/example/pages/tab/index.wxss
@ -5,4 +5,9 @@

 .content-2 {
  padding: 20px;
-}
+}
+
+.right-nav {
+  padding: 0 10px;
+  line-height: 44px !important;
+}
--- a/packages/mixins/basic.ts
+++ b/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)
--- a/packages/tab/README.md
+++ b/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 属性 |
--- a/packages/tabs/index.less
+++ b/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 {
--- a/packages/tabs/index.ts
+++ b/packages/tabs/index.ts
@ -2,12 +2,14 @@ import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';

 type TabItemData = {
-  width?: number;
-  active: boolean;
-  inited?: boolean;
-  animated?: boolean;
+  width?: number
+  active: boolean
+  inited?: 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 {
-        color,
-        active,
-        duration,
-        lineWidth,
-        lineHeight
-      } = this.data;
+      const { 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 {
-        animated,
-        active,
-        duration
-      } = this.data;
+      const { 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) {
-      this.child.forEach(item => {
-        item.set(props);
+        const props = { width, animated };
+
+        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 => {
-        const tabRect = tabRects[this.data.active];
-        const offsetLeft = tabRects
-          .slice(0, this.data.active)
-          .reduce((prev, curr) => prev + curr.width, 0);
-        const tabWidth = tabRect.width;
+      Promise.all([
+        this.getRect('.van-tab', true),
+        this.getRect('.van-tabs__nav')
+      ]).then(
+        ([tabRects, navRect]: [BoundingClientRect[], BoundingClientRect]) => {
+          const tabRect = tabRects[active];
+          const offsetLeft = tabRects
+            .slice(0, active)
+            .reduce((prev, curr) => prev + curr.width, 0);

-        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;
-      let wrapStyle;
+      const { offsetTop, position } = this.data as {
+        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({
-        wrapStyle
-      });
+      this.set({ wrapStyle });
    },

-    // adjust tab position
-    onScroll(scrollTop) {
-      if (!this.data.sticky) return;
+    observerContentScroll() {
+      if (!this.data.sticky) {
+        return;
+      }

      const { offsetTop } = this.data;
+      const { windowHeight } = wx.getSystemInfoSync();

-      this.getRect('.van-tabs').then(rect => {
-        const { top, height } = rect;
+      wx.createIntersectionObserver(this)
+        .relativeToViewport({ top: -this.navHeight })
+        .observe('.van-tabs', res => {
+          const { top } = res.boundingClientRect;

-        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';
+          if (top > 0) {
+            return;
          }

+          const position: Position =
+            res.intersectionRatio > 0 ? 'top' : 'bottom';
+
          this.$emit('scroll', {
-            scrollTop: scrollTop + offsetTop,
+            scrollTop: top + offsetTop,
            isFixed: position === 'top'
          });

-          if (position !== this.data.position) {
-            this.set({
-              position
-            }, () => {
-              this.setWrapStyle();
-            });
-          }
+          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({ position }).then(() => {
+          this.setWrapStyle();
+        });
+      }
    }
  }
 });
--- a/packages/tabs/index.wxml
+++ b/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 style="z-index: {{ zIndex }}; {{ wrapStyle }}" class="van-tabs__wrap {{ scrollable ? 'van-tabs__wrap--scrollable' : '' }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
+<view class="custom-class {{ utils.bem('tabs', [type]) }}">
+  <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"
--- a/types/wx.d.ts
+++ b/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
-  rect?: boolean
-  size?: boolean
-  scrollOffset?: boolean
-  properties?: string[]
-  computedStyle?: string[]
-  context?: boolean
+  dataset: boolean
+  rect: boolean
+  size: boolean
+  scrollOffset: boolean
+  properties: string[]
+  computedStyle: string[]
+  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;