refactor(Tab): refactor component with Sticky (#2285)

fix #2253 #2122

Tab
support css variables

example/pages/tab/index.wxml

@@ -57,7 +57,7 @@
 </demo-block>
 
 <demo-block title="样式风格">
-  <van-tabs type="card" tab-class="tab-class" tab-active-class="tab-active-class">
+  <van-tabs type="card" tab-class="tab-class">
     <van-tab
       wx:for="123"
       wx:key="index"

example/pages/tab/index.wxss

@@ -14,6 +14,7 @@ page {
 .right-nav {
   padding: 0 10px;
   line-height: 44px !important;
+  background-color: #fff;
 }
 
 .tab-class {

packages/common/style/var.less

@@ -442,6 +442,20 @@
 @tabbar-item-icon-size: 18px;
 @tabbar-item-margin-bottom: 5px;
 
+// Tab
+@tab-text-color: @gray-darker;
+@tab-active-text-color: @text-color;
+@tab-disabled-text-color: @gray;
+@tab-font-size: @font-size-md;
+
+// Tabs
+@tabs-default-color: @red;
+@tabs-line-height: 44px;
+@tabs-card-height: 30px;
+@tabs-nav-background-color: @white;
+@tabs-bottom-bar-height: 3px;
+@tabs-bottom-bar-color: @tabs-default-color;
+
 // Tag
 @tag-padding: .2em .5em;
 @tag-font-size: @font-size-xs;

packages/sticky/index.less

@@ -1,3 +1,11 @@
 .van-sticky {
   position: relative;
+
+  &-wrap {
+    &--fixed {
+      position: fixed;
+      right: 0;
+      left: 0;
+    }
+  }
 }

packages/sticky/index.ts

@@ -1,7 +1,4 @@
 import { VantComponent } from '../common/component';
-import { nextTick } from '../common/utils';
-
-type Position = 'top' | 'bottom' | '';
 
 VantComponent({
   props: {
@@ -12,131 +9,69 @@ VantComponent({
     offsetTop: {
       type: Number,
       value: 0
-    }
+    },
+    disabled: Boolean
   },
 
   data: {
-    position: '', // 当前定位
-    height: 0,
     wrapStyle: '',
     containerStyle: ''
   },
 
   methods: {
-    setWrapStyle() {
+    setStyle() {
-      const { offsetTop, position } = this.data;
+      const { offsetTop, height, fixed, zIndex } = this.data;
-      let wrapStyle: string;
-      let containerStyle: string;
 
-      switch (position) {
+      if (fixed) {
-        case 'top':
+        this.setData({
-          wrapStyle = `
+          wrapStyle: `top: ${offsetTop}px;`,
-            top: ${offsetTop}px;
+          containerStyle: `height: ${height}px; z-index: ${zIndex};`
-            position: fixed;
+        });
-          `;
+      } else {
-          containerStyle = `height: ${this.itemHeight}px;`;
+        this.setData({
-          break;
+          wrapStyle: '',
-        case 'bottom':
+          containerStyle: ''
-          wrapStyle = `
-            top: auto;
-            bottom: 0;
-          `;
-          containerStyle = '';
-          break;
-        default:
-          wrapStyle = '';
-          containerStyle = '';
-      }
-
-      const data: Record<string, string> = {};
-
-      if (wrapStyle !== this.data.wrapStyle) {
-        data.wrapStyle = wrapStyle;
-      }
-
-      if (containerStyle !== this.data.containerStyle) {
-        data.containerStyle = containerStyle;
-      }
-
-      if (JSON.stringify(data) !== '{}') {
-        this.setData(data);
-      }
-    },
-
-    setPosition(position: Position) {
-      if (position !== this.data.position) {
-        this.setData({ position });
-        nextTick(() => {
-          this.setWrapStyle();
         });
       }
     },
 
     observerContentScroll() {
-      const { offsetTop = 0 } = this.data;
+      const { offsetTop } = this.data;
-      const { windowHeight } = wx.getSystemInfoSync();
+      const intersectionObserver = this.createIntersectionObserver({
-
+        thresholds: [0, 1]
-      this.createIntersectionObserver({}).disconnect();
+      });
-
+      this.intersectionObserver = intersectionObserver;
-      // @ts-ignore
+      intersectionObserver.relativeToViewport({ top: -offsetTop });
-      this.createIntersectionObserver()
+      intersectionObserver.observe(
-        .relativeToViewport({ top: -(this.itemHeight + offsetTop) })
+        '.van-sticky',
-        .observe(
+        (res) => {
-          '.van-sticky',
+          if (this.data.disabled) {
-          (res: WechatMiniprogram.ObserveCallbackResult) => {
+            return;
-            const { top } = res.boundingClientRect;
-
-            if (top > offsetTop) {
-              return;
-            }
-
-            const position: Position = 'top';
-
-            this.$emit('scroll', {
-              scrollTop: top + offsetTop,
-              isFixed: true
-            });
-
-            this.setPosition(position);
           }
-        );
+          // @ts-ignore
+          const { top, height } = res.boundingClientRect;
+          const fixed = top <= offsetTop;
 
-      // @ts-ignore
+          this.$emit('scroll', {
-      this.createIntersectionObserver()
+            scrollTop: top,
-        .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) })
+            isFixed: fixed
-        .observe(
+          });
-          '.van-sticky',
-          (res: WechatMiniprogram.ObserveCallbackResult) => {
-            const { top, bottom } = res.boundingClientRect;
 
-            if (bottom <= this.itemHeight - 1) {
+          this.setData({ fixed, height });
-              return;
-            }
 
-            const position: Position = res.intersectionRatio > 0 ? 'top' : '';
+          wx.nextTick(() => {
-
+            this.setStyle();
-            this.$emit('scroll', {
+          });
-              scrollTop: top + offsetTop,
+        }
-              isFixed: position === 'top'
+      );
-            });
-
-            this.setPosition(position);
-          }
-        );
     }
   },
 
   mounted() {
-    this.getRect('.van-sticky').then(
+    this.observerContentScroll();
-      (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
-        this.itemHeight = rect.height;
-        this.itemTop = rect.top;
-        this.observerContentScroll();
-      }
-    );
   },
 
   destroyed() {
-    this.createIntersectionObserver({}).disconnect();
+    this.intersectionObserver.disconnect();
   }
 });

packages/sticky/index.wxml

@@ -1,5 +1,7 @@
-<view class="custom-class van-sticky" style="z-index: {{ zIndex }}; {{ containerStyle }}">
+<wxs src="../wxs/utils.wxs" module="utils" />
-  <view class="van-sticky-wrap" style="{{ wrapStyle }}">
+
+<view class="custom-class van-sticky }}" style="{{ containerStyle }}">
+  <view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ wrapStyle }}">
     <slot />
   </view>
 </view>

packages/tab/index.ts

@@ -3,7 +3,13 @@ import { VantComponent } from '../common/component';
 VantComponent({
   relation: {
     name: 'tabs',
-    type: 'ancestor'
+    type: 'ancestor',
+    linked(target) {
+      this.parent = target;
+    },
+    unlinked() {
+      this.parent = null;
+    }
   },
 
   props: {
@@ -15,7 +21,6 @@ VantComponent({
     name: {
       type: [Number, String],
       value: '',
-      observer: 'setComputedName'
     }
   },
 
@@ -39,10 +44,16 @@ VantComponent({
       this.computedName = this.data.name || this.index;
     },
 
+    getComputedName() {
+      if (this.data.name !== '') {
+        return this.data.name;
+      }
+      return this.index;
+    },
+
     update() {
-      const parent = this.getRelationNodes('../tabs/index')[0];
+      if (this.parent) {
-      if (parent) {
+        this.parent.updateTabs();
-        parent.updateTabs();
       }
     }
   }

packages/tabs/index.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "van-info": "../info/index"
+    "van-info": "../info/index",
+    "van-sticky": "../sticky/index"
   }
 }

packages/tabs/index.less

@@ -1,29 +1,13 @@
 @import '../common/style/var.less';
 @import '../common/style/theme.less';
 
-@tabs-line-height: 44px;
-@tabs-card-height: 30px;
-
 .van-tabs {
   position: relative;
   -webkit-tap-highlight-color: transparent;
 
   &__wrap {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
     display: flex;
-    .theme(background-color, '@white');
+    overflow: hidden;
-
-    &--page-top {
-      position: fixed;
-    }
-
-    &--content-bottom {
-      top: auto;
-      bottom: 0;
-    }
 
     &--scrollable {
       .van-tab {
@@ -32,9 +16,17 @@
     }
   }
 
-  &__scroll--card {
+  &__scroll {
-    border-radius: 2px;
+    .theme(background-color, '@tabs-nav-background-color');
-    .theme(border, '1px solid @red');
+
+    &--line {
+      box-sizing: content-box;
+      height: calc(100% + 15px); /* 15px padding to hide scrollbar in mobile safari */
+    }
+
+    &--card {
+      .theme(margin, '0 @padding-md');
+    }
   }
 
   &__nav {
@@ -42,17 +34,16 @@
     display: flex;
     user-select: none;
 
-    &--line {
-      height: 100%;
-    }
-
     &--card {
+      box-sizing: border-box;
       .theme(height, '@tabs-card-height');
+      .theme(border, '@border-width-base solid @tabs-default-color');
+      .theme(border-radius, '@border-radius-sm');
 
       .van-tab {
-        .theme(color, '@red');
+        .theme(color, '@tabs-default-color');
-        .theme(line-height, '@tabs-card-height');
+        .theme(line-height, 'calc(@tabs-card-height - 2 * @border-width-base)');
-        .theme(border-right, '1px solid @red');
+        .theme(border-right, '@border-width-base solid @tabs-default-color');
 
         &:last-child {
           border-right: none;
@@ -60,7 +51,11 @@
 
         &.van-tab--active {
           .theme(color, '@white');
-          .theme(background-color, '@red');
+          .theme(background-color, '@tabs-default-color');
+        }
+
+        &--disabled {
+          .theme(color, '@tab-disabled-text-color');
         }
       }
     }
@@ -71,34 +66,29 @@
     bottom: 0;
     left: 0;
     z-index: 1;
-    height: 3px;
+    .theme(height, '@tabs-bottom-bar-height');
-    border-radius: 3px;
+    .theme(border-radius, '@tabs-bottom-bar-height');
-    .theme(background-color, '@red');
+    .theme(background-color, '@tabs-bottom-bar-color');
   }
 
-  &--line {
+  &__track {
-    .theme(padding-top, '@tabs-line-height');
+    position: relative;
-
-    .van-tabs__wrap {
-      .theme(height, '@tabs-line-height');
-    }
-  }
-
-  &--card {
-    margin: 0 15px;
-    .theme(padding-top, '@tabs-card-height');
-
-    .van-tabs__wrap {
-      .theme(height, '@tabs-card-height');
-    }
   }
 
   &__content {
     overflow: hidden;
   }
 
-  &__track {
+  &--line {
-    position: relative;
+    .van-tabs__wrap {
+      .theme(height, '@tabs-line-height');
+    }
+  }
+
+  &--card {
+    .van-tabs__wrap {
+      .theme(height, '@tabs-card-height');
+    }
   }
 }
 
@@ -108,19 +98,19 @@
   box-sizing: border-box;
   min-width: 0; /* hack for flex ellipsis */
   padding: 0 5px;
-  font-size: 14px;
   text-align: center;
   cursor: pointer;
-  .theme(color, '@gray-darker');
+  .theme(color, '@tab-text-color');
+  .theme(font-size, '@tab-font-size');
   .theme(line-height, '@tabs-line-height');
 
   &--active {
-    font-weight: 500;
+    .theme(font-weight, '@font-weight-bold');
-    .theme(color, '@text-color');
+    .theme(color, '@tab-active-text-color');
   }
 
   &--disabled {
-    .theme(color, '@gray');
+    .theme(color, '@tab-disabled-text-color');
   }
 
   &__title {

packages/tabs/index.ts

@@ -4,15 +4,13 @@ import { Weapp } from 'definitions/weapp';
 import { nextTick, isDef, addUnit } from '../common/utils';
 
 type TabItemData = {
-  width?: number
+  width?: number;
-  active: boolean
+  active: boolean;
-  inited?: boolean
+  inited?: boolean;
-  animated?: boolean
+  animated?: boolean;
-  name?: string | number
+  name?: string | number;
 };
 
-type Position = 'top' | 'bottom' | '';
-
 VantComponent({
   mixins: [touch],
 
@@ -23,7 +21,6 @@ VantComponent({
     type: 'descendant',
     linked(child) {
       child.index = this.children.length;
-      child.setComputedName();
       this.children.push(child);
       this.updateTabs(this.data.tabs.concat(child.data));
     },
@@ -37,7 +34,6 @@ VantComponent({
       while (i >= 0 && i < this.children.length) {
         const currentChild = this.children[i];
         currentChild.index--;
-        currentChild.setComputedName();
         i++;
       }
 
@@ -46,21 +42,33 @@ VantComponent({
   },
 
   props: {
-    color: String,
+    color: {
+      type: String,
+      observer: 'setLine'
+    },
     sticky: Boolean,
-    animated: Boolean,
+    animated: {
+      type: Boolean,
+      observer: 'setTrack'
+    },
     swipeable: Boolean,
     lineWidth: {
       type: [String, Number],
-      value: -1
+      value: -1,
+      observer: 'setLine'
     },
     lineHeight: {
       type: [String, Number],
-      value: -1
+      value: -1,
+      observer: 'setLine'
     },
     active: {
       type: [String, Number],
       value: 0,
+      observer(value) {
+        this.currentName = value;
+        this.setActiveTab();
+      }
     },
     type: {
       type: String,
@@ -80,7 +88,12 @@ VantComponent({
     },
     swipeThreshold: {
       type: Number,
-      value: 4
+      value: 4,
+      observer() {
+        this.setData({
+          scrollable: this.children.length > this.data.swipeThreshold
+        });
+      }
     },
     offsetTop: {
       type: Number,
@@ -96,21 +109,7 @@ VantComponent({
     trackStyle: '',
     wrapStyle: '',
     position: '',
-    currentIndex: 0,
+    currentIndex: 0
-  },
-
-  watch: {
-    swipeThreshold() {
-      this.setData({
-        scrollable: this.children.length > this.data.swipeThreshold
-      });
-    },
-    color: 'setLine',
-    lineWidth: 'setLine',
-    lineHeight: 'setLine',
-    active: 'setActiveTab',
-    animated: 'setTrack',
-    offsetTop: 'setWrapStyle'
   },
 
   beforeCreate() {
@@ -121,17 +120,6 @@ VantComponent({
     this.setLine(true);
     this.setTrack();
     this.scrollIntoView();
-    this.getRect('.van-tabs__wrap').then(
-      (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
-        this.navHeight = rect.height;
-        this.observerContentScroll();
-      }
-    );
-  },
-
-  destroyed() {
-    // @ts-ignore
-    this.createIntersectionObserver().disconnect();
   },
 
   methods: {
@@ -156,18 +144,20 @@ VantComponent({
     onTap(event: Weapp.Event) {
       const { index } = event.currentTarget.dataset;
       const child = this.children[index];
+      const computedName = child.getComputedName();
+
       if (this.data.tabs[index].disabled) {
-        this.trigger('disabled', child.computedName);
+        this.trigger('disabled', computedName);
       } else {
-        this.trigger('click', child.computedName);
+        this.trigger('click', computedName);
-        this.setActive(child.computedName);
+        this.setActive(computedName);
       }
     },
 
-    setActive(computedName) {
+    setActive(name) {
-      if (computedName !== this.currentName) {
+      if (name !== this.currentName) {
-        this.currentName = computedName;
+        this.currentName = name;
-        this.trigger('change', computedName);
+        this.trigger('change', name);
         this.setActiveTab();
       }
     },
@@ -177,13 +167,22 @@ VantComponent({
         return;
       }
 
-      const { color, duration, currentIndex, lineWidth, lineHeight } = this.data;
+      const {
+        color,
+        duration,
+        currentIndex,
+        lineWidth,
+        lineHeight
+      } = this.data;
 
       this.getRect('.van-tab', true).then(
         (rects: WechatMiniprogram.BoundingClientRectCallbackResult[]) => {
           const rect = rects[currentIndex];
           const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
-          const height = lineHeight !== -1 ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};` : '';
+          const height =
+            lineHeight !== -1
+              ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};`
+              : '';
 
           let left = rects
             .slice(0, currentIndex)
@@ -230,34 +229,42 @@ VantComponent({
 
           const data = { width, animated };
 
-          this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance) => {
+          this.children.forEach(
-            item.setData(data);
+            (item: WechatMiniprogram.Component.TrivialInstance) => {
-          });
+              item.setData(data);
+            }
+          );
         }
       );
     },
 
     setActiveTab() {
       if (!isDef(this.currentName)) {
-        this.currentName = this.data.active || (this.children[0] || {}).computedName;
+        const { active } = this.data;
+        const { children = [] } = this;
+
+        this.currentName =
+          active === '' && children.length
+            ? children[0].getComputedName()
+            : active;
       }
 
-      this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance, index: number) => {
+      this.children.forEach(
-        const data: TabItemData = {
+        (item: WechatMiniprogram.Component.TrivialInstance, index: number) => {
-          active: item.computedName === this.currentName
+          const data: TabItemData = {
-        };
+            active: item.getComputedName() === this.currentName
+          };
 
-        if (data.active) {
+          if (data.active) {
-          this.setData({
+            this.setData({ currentIndex: index });
-            currentIndex: index
+            data.inited = true;
-          });
+          }
-          data.inited = true;
-        }
 
-        if (data.active !== item.data.active) {
+          if (data.active !== item.data.active) {
-          item.setData(data);
+            item.setData(data);
+          }
         }
-      });
+      );
 
       nextTick(() => {
         this.setLine();
@@ -279,8 +286,8 @@ VantComponent({
         this.getRect('.van-tabs__nav')
       ]).then(
         ([tabRects, navRect]: [
-        WechatMiniprogram.BoundingClientRectCallbackResult[],
+          WechatMiniprogram.BoundingClientRectCallbackResult[],
-        WechatMiniprogram.BoundingClientRectCallbackResult
+          WechatMiniprogram.BoundingClientRectCallbackResult
         ]) => {
           const tabRect = tabRects[currentIndex];
           const offsetLeft = tabRects
@@ -317,101 +324,13 @@ VantComponent({
 
       if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
         if (deltaX > 0 && currentIndex !== 0) {
-          this.setActive(this.children[currentIndex - 1].computedName);
+          const child = this.children[currentIndex - 1];
+          this.setActive(child.getComputedName());
         } else if (deltaX < 0 && currentIndex !== tabs.length - 1) {
-          this.setActive(this.children[currentIndex + 1].computedName);
+          const child = this.children[currentIndex - 1];
+          this.setActive(child.getComputedName());
         }
       }
-    },
-
-    setWrapStyle() {
-      const { offsetTop, position } = this.data as {
-        offsetTop: number
-        position: Position
-      };
-      let wrapStyle: string;
-
-      switch (position) {
-        case 'top':
-          wrapStyle = `
-            top: ${offsetTop}px;
-            position: fixed;
-          `;
-          break;
-        case 'bottom':
-          wrapStyle = `
-            top: auto;
-            bottom: 0;
-          `;
-          break;
-        default:
-          wrapStyle = '';
-      }
-
-      if (wrapStyle !== this.data.wrapStyle) {
-        this.setData({ wrapStyle });
-      }
-    },
-
-    observerContentScroll() {
-      if (!this.data.sticky) {
-        return;
-      }
-
-      const { offsetTop } = this.data;
-      const { windowHeight } = wx.getSystemInfoSync();
-
-      // @ts-ignore
-      this.createIntersectionObserver().disconnect();
-
-      // @ts-ignore
-      this.createIntersectionObserver()
-        .relativeToViewport({ top: -(this.navHeight + offsetTop) })
-        .observe('.van-tabs', (res: WechatMiniprogram.ObserveCallbackResult) => {
-          const { top } = res.boundingClientRect;
-
-          if (top > offsetTop) {
-            return;
-          }
-
-          const position: Position =
-            res.intersectionRatio > 0 ? 'top' : 'bottom';
-
-          this.$emit('scroll', {
-            scrollTop: top + offsetTop,
-            isFixed: position === 'top'
-          });
-
-          this.setPosition(position);
-        });
-
-      // @ts-ignore
-      this.createIntersectionObserver()
-        .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) })
-        .observe('.van-tabs', (res: WechatMiniprogram.ObserveCallbackResult) => {
-          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();
-        });
-      }
     }
   }
 });

packages/tabs/index.wxml

@@ -1,41 +1,44 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <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' : '' }}">
+  <van-sticky disabled="{{ !sticky }}" z-index="{{ zIndex }}" offset-top="{{ offsetTop }}">
-    <slot name="nav-left" />
+    <view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
+      <slot name="nav-left" />
 
-    <scroll-view
+      <scroll-view
-      scroll-x="{{ scrollable }}"
+        scroll-x="{{ scrollable }}"
-      scroll-with-animation
+        scroll-with-animation
-      scroll-left="{{ scrollLeft }}"
+        scroll-left="{{ scrollLeft }}"
-      class="van-tabs__scroll--{{ type }}"
+        class="{{ utils.bem('tabs__scroll', [type]) }}"
-      style="{{ color ? 'border-color: ' + color : '' }}"
+        style="{{ color ? 'border-color: ' + color : '' }}"
-    >
+      >
-      <view class="{{ utils.bem('tabs__nav', [type]) }} nav-class">
+        <view class="{{ utils.bem('tabs__nav', [type]) }} nav-class">
-        <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
+          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
-        <view
+          <view
-          wx:for="{{ tabs }}"
+            wx:for="{{ tabs }}"
-          wx:key="index"
+            wx:key="index"
-          data-index="{{ index }}"
+            data-index="{{ index }}"
-          class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}"
+            class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}"
-          style="{{ color && index !== currentIndex && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === currentIndex && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
+            style="{{ color && index !== currentIndex && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === currentIndex && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
-          bind:tap="onTap"
+            bind:tap="onTap"
-        >
+          >
-          <view class="van-ellipsis" style="{{ item.titleStyle }}">
+            <view class="van-ellipsis" style="{{ item.titleStyle }}">
-            {{ item.title }}
+              {{ item.title }}
-            <van-info
+              <van-info
-              wx:if="{{ item.info !== null || item.dot }}"
+                wx:if="{{ item.info !== null || item.dot }}"
-              info="{{ item.info }}"
+                info="{{ item.info }}"
-              dot="{{ item.dot }}"
+                dot="{{ item.dot }}"
-              custom-class="van-tab__title__info"
+                custom-class="van-tab__title__info"
-            />
+              />
+            </view>
           </view>
         </view>
-      </view>
+      </scroll-view>
-    </scroll-view>
+
+      <slot name="nav-right" />
+    </view>
+  </van-sticky>
 
-    <slot name="nav-right" />
-  </view>
   <view
     class="van-tabs__content"
     bind:touchstart="onTouchStart"