[new feature] add Tab component (#496)

dist/field/index.js

@@ -55,8 +55,8 @@ Component({
       value: true
     },
     titleWidth: {
-      type: Number,
-      value: 90
+      type: String,
+      value: '90px'
     }
   },
 

dist/tab/index.js

@@ -0,0 +1,31 @@
+const TABS_PATH = '../tabs/index';
+
+Component({
+  options: {
+    addGlobalClass: true
+  },
+
+  properties: {
+    disabled: Boolean,
+    title: {
+      type: String,
+      observer() {
+        const parent = this.getRelationNodes(TABS_PATH)[0];
+        if (parent) {
+          parent.setLine();
+        }
+      }
+    }
+  },
+
+  relations: {
+    [TABS_PATH]: {
+      type: 'ancestor'
+    }
+  },
+
+  data: {
+    inited: false,
+    active: false
+  }
+});

dist/tab/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

dist/tab/index.wxml

@@ -0,0 +1,7 @@
+<view
+  wx:if="{{ inited }}"
+  class="van-tab__pane"
+  style="{{ active ? '' : 'display: none' }}"
+>
+  <slot />
+</view>

dist/tabs/index.js

@@ -0,0 +1,178 @@
+const TAB_PATH = '../tab/index';
+
+Component({
+  options: {
+    addGlobalClass: true
+  },
+
+  relations: {
+    [TAB_PATH]: {
+      type: 'descendant',
+
+      linked(target) {
+        const { tabs } = this.data;
+        tabs.push({
+          instance: target,
+          data: target.data
+        });
+        this.setData({
+          tabs,
+          scrollable: tabs.length > this.data.swipeThreshold
+        });
+        this.setActiveTab();
+      },
+
+      unlinked(target) {
+        const tabs = this.data.tabs.filter(item => item.instance !== target);
+        this.setData({
+          tabs,
+          scrollable: tabs.length > this.data.swipeThreshold
+        });
+        this.setActiveTab();
+      }
+    }
+  },
+
+  properties: {
+    color: {
+      type: String,
+      observer: 'setLine'
+    },
+    lineWidth: {
+      type: Number,
+      observer: 'setLine'
+    },
+    active: {
+      type: null,
+      value: 0
+    },
+    type: {
+      type: String,
+      value: 'line'
+    },
+    duration: {
+      type: Number,
+      value: 0.2
+    },
+    swipeThreshold: {
+      type: Number,
+      value: 4,
+      observer() {
+        this.setData({
+          scrollable: this.data.tabs.length > this.data.swipeThreshold
+        });
+      }
+    }
+  },
+
+  data: {
+    tabs: [],
+    lineStyle: '',
+    scrollLeft: 0
+  },
+
+  ready() {
+    this.setLine();
+    this.scrollIntoView();
+  },
+
+  methods: {
+    trigger(eventName, index) {
+      this.triggerEvent(eventName, {
+        index,
+        title: this.data.tabs[index].data.title
+      });
+    },
+
+    onTap(event) {
+      const { index } = event.currentTarget.dataset;
+      if (this.data.tabs[index].data.disabled) {
+        this.trigger('disabled', index);
+      } else {
+        this.trigger('click', index);
+        this.setActive(index);
+      }
+    },
+
+    setActive(active) {
+      if (active !== this.data.active) {
+        this.trigger('change', active);
+        this.setData({ active });
+        this.setActiveTab();
+        this.setLine();
+        this.scrollIntoView();
+      }
+    },
+
+    getRect(selector, callback, all) {
+      wx.createSelectorQuery()
+        .in(this)[all ? 'selectAll' : 'select'](selector)
+        .boundingClientRect(rect => {
+          rect && callback(rect);
+        })
+        .exec();
+    },
+
+    setLine() {
+      if (this.data.type !== 'line') {
+        return;
+      }
+
+      this.getRect('.van-tab', rects => {
+        const rect = rects[this.data.active];
+        const width = this.data.lineWidth || rect.width;
+        let left = rects
+          .slice(0, this.data.active)
+          .reduce((prev, curr) => prev + curr.width, 0);
+        left += (rect.width - width) / 2;
+
+        this.setData({
+          lineStyle: `
+            width: ${width}px;
+            background-color: ${this.data.color};
+            transform: translateX(${left}px);
+            transition-duration: ${this.data.duration}s;
+          `
+        });
+      }, true);
+    },
+
+    setActiveTab() {
+      this.data.tabs.forEach((item, index) => {
+        const data = {
+          active: index === this.data.active
+        };
+
+        if (data.active) {
+          data.inited = true;
+        }
+
+        if (data.active !== item.instance.data.active) {
+          item.instance.setData(data);
+        }
+      });
+    },
+
+    // scroll active tab into view
+    scrollIntoView(immediate) {
+      if (!this.data.scrollable) {
+        return;
+      }
+
+      this.getRect('.van-tab', 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;
+
+        this.getRect('.van-tabs__nav', navRect => {
+          const navWidth = navRect.width;
+          this.setData({
+            scrollLeft: offsetLeft - (navWidth - tabWidth) / 2
+          });
+        });
+      }, true);
+    }
+  }
+});

dist/tabs/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

dist/tabs/index.wxml

@@ -0,0 +1,26 @@
+<view class="van-tabs van-tabs--{{ type }}">
+  <view class="van-tabs__wrap {{ scrollable ? 'van-tabs__wrap--scrollable' : '' }} {{ type === 'line' ? 'van-hairline--top-bottom' : '' }}">
+    <scroll-view
+      scroll-x="{{ scrollable }}"
+      scroll-with-animation
+      scroll-left="{{ scrollLeft }}"
+    >
+      <view class="van-tabs__nav van-tabs__nav--{{ type }}">
+        <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
+        <view
+          wx:for="{{ tabs }}"
+          wx:key="index"
+          data-index="{{ index }}"
+          class="van-tab {{ index === active ? 'van-tab--active' : '' }} {{ item.data.disabled ? 'van-tab--disabled' : '' }}"
+          style="{{ color ? 'color: ' + color : '' }}"
+          bind:tap="onTap"
+        >
+          <view class="van-ellipsis">{{ item.data.title }}</view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+  <view class="van-tabs__content">
+    <slot />
+  </view>
+</view>

dist/tabs/index.wxss

@@ -0,0 +1 @@
+.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{top:0;left:0;right:0;z-index:99;position:absolute}.van-tabs__wrap--page-top{position:fixed}.van-tabs__wrap--content-bottom{top:auto;bottom:0}.van-tabs__wrap--scrollable .van-tab{-webkit-box-flex:0;-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__nav{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none;position:relative;background-color:#fff}.van-tabs__nav--line{height:100%}.van-tabs__nav--card{margin:0 15px;border-radius:2px;box-sizing:border-box;border:1px solid #f44;height:30px}.van-tabs__nav--card .van-tab{color:#f44;border-right:1px solid #f44;line-height:28px}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;background-color:#f44}.van-tabs__line{z-index:1;left:0;bottom:0;height:2px;position:absolute;background-color:#f44}.van-tabs--line{padding-top:44px}.van-tabs--line .van-tabs__wrap{height:44px}.van-tabs--card{padding-top:30px}.van-tabs--card .van-tabs__wrap{height:30px}.van-tab{-webkit-box-flex:1;-webkit-flex:1;flex:1;cursor:pointer;padding:0 5px;font-size:14px;position:relative;color:#333;line-height:44px;text-align:center;box-sizing:border-box;background-color:#fff;min-width:0}.van-tab span{display:block}.van-tab:active{background-color:#e8e8e8}.van-tab--active{color:#f44}.van-tab--disabled{color:#c9c9c9}.van-tab--disabled:active{background-color:#fff}

example/app.json

@@ -22,9 +22,10 @@
     "pages/switch-cell/index",
     "pages/search/index",
     "pages/slider/index",
+    "pages/tab/index",
+    "pages/tabbar/index",
     "pages/tag/index",
     "pages/toast/index",
-    "pages/tabbar/index",
     "pages/transition/index",
     "pages/tree-select/index"
   ],

example/config.js

@@ -54,6 +54,10 @@ export default [
         path: '/tag',
         title: 'Tag 标记'
       },
+      {
+        path: '/tab',
+        title: 'Tab 标签页'
+      },
       {
         path: '/tabbar',
         title: 'Tabbar 标签栏'

example/pages/tab/index.js

@@ -0,0 +1,29 @@
+import Page from '../../common/page';
+
+Page({
+  data: {
+    tabs: [1, 2, 3, 4],
+    tabsMore: [1, 2, 3, 4, 5, 6, 7, 8]
+  },
+
+  onClickDisabled(event) {
+    wx.showToast({
+      title: `标签 ${event.detail.index + 1} 已被禁用`,
+      icon: 'none'
+    });
+  },
+
+  onChange(event) {
+    wx.showToast({
+      title: `切换到标签 ${event.detail.index + 1}`,
+      icon: 'none'
+    });
+  },
+
+  onClick(event) {
+    wx.showToast({
+      title: `点击标签 ${event.detail.index + 1}`,
+      icon: 'none'
+    });
+  }
+});

example/pages/tab/index.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "Tab 标签页",
+  "usingComponents": {
+    "demo-block": "../../components/demo-block/index",
+    "van-tab": "../../dist/tab/index",
+    "van-tabs": "../../dist/tabs/index"
+  }
+}

example/pages/tab/index.wxml

@@ -0,0 +1,70 @@
+<demo-block title="基础用法">
+  <van-tabs active="{{ 1 }}" bind:change="onChange">
+    <van-tab
+      wx:for="1234"
+      wx:key="index"
+      title="{{ '标签' + item }}"
+    >
+      <view class="content">
+        {{ '内容' + item }}
+      </view>
+    </van-tab>
+  </van-tabs>
+</demo-block>
+
+<demo-block title="横向滚动">
+  <van-tabs>
+    <van-tab
+      wx:for="123456"
+      wx:key="index"
+      title="{{ '标签' + item }}"
+    >
+      <view class="content">
+        {{ '内容' + item }}
+      </view>
+    </van-tab>
+  </van-tabs>
+</demo-block>
+
+<demo-block title="禁用标签">
+  <van-tabs bind:disabled="onClickDisabled">
+    <van-tab
+      wx:for="123"
+      wx:key="index"
+      disabled="{{ index === 1 }}"
+      title="{{ '标签' + item }}"
+    >
+      <view class="content">
+        {{ '内容' + item }}
+      </view>
+    </van-tab>
+  </van-tabs>
+</demo-block>
+
+<demo-block title="样式风格">
+  <van-tabs type="card">
+    <van-tab
+      wx:for="123"
+      wx:key="index"
+      title="{{ '标签' + item }}"
+    >
+      <view class="content">
+        {{ '内容' + item }}
+      </view>
+    </van-tab>
+  </van-tabs>
+</demo-block>
+
+<demo-block title="点击事件">
+  <van-tabs bind:click="onClick">
+    <van-tab
+      wx:for="12"
+      wx:key="index"
+      title="{{ '标签' + item }}"
+    >
+      <view class="content">
+        {{ '内容' + item }}
+      </view>
+    </van-tab>
+  </van-tabs>
+</demo-block>

example/pages/tab/index.wxss

@@ -0,0 +1,4 @@
+.content {
+  padding: 20px;
+  background-color: #fff;
+}

example/pages/tabbar/index.json

@@ -1,5 +1,5 @@
 {
-  "navigationBarTitleText": "Tabbar 标签页",
+  "navigationBarTitleText": "Tabbar 标签栏",
   "usingComponents": {
     "demo-block": "../../components/demo-block/index",
     "van-tabbar": "../../dist/tabbar/index",

packages/tab/README.md

@@ -0,0 +1,144 @@
+## Tab 标签页
+
+### 使用指南
+在 index.json 中引入组件
+```json
+"usingComponents": {
+  "van-tab": "path/to/vant-weapp/dist/tab/index",
+  "van-tabs": "path/to/vant-weapp/dist/tabs/index"
+}
+```
+
+### 代码演示
+
+#### 基础用法
+
+默认情况下启用第一个标签，可以通过`active`设定当前激活的标签索引，在回调参数的`event.detail`中可以取得被点击标签的标题和索引
+
+```html
+<van-tabs active="{{ active }}" bind:change="onChange">
+  <van-tab title="标签 1">内容 1</van-tab>
+  <van-tab title="标签 2">内容 2</van-tab>
+  <van-tab title="标签 3">内容 3</van-tab>
+  <van-tab title="标签 4">内容 4</van-tab>
+</van-tabs>
+```
+
+```js
+Page({
+  data: {
+    active: 1
+  },
+
+  onChange(event) {
+    wx.showToast({
+      title: `切换到标签 ${event.detail.index + 1}`,
+      icon: 'none'
+    });
+  }
+});
+```
+
+#### 横向滚动
+
+多于 4 个标签时，Tab 可以横向滚动
+
+```html
+<van-tabs active="{{ active }}">
+  <van-tab title="标签 1">内容 1</van-tab>
+  <van-tab title="标签 2">内容 2</van-tab>
+  <van-tab title="标签 3">内容 3</van-tab>
+  <van-tab title="标签 4">内容 4</van-tab>
+  <van-tab title="标签 5">内容 5</van-tab>
+  <van-tab title="标签 6">内容 6</van-tab>
+</van-tabs>
+```
+
+#### 禁用标签
+
+设置`disabled`属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在`van-tabs`上监听`disabled`事件
+
+```html
+<van-tabs bind:disabled="onClickDisabled">
+  <van-tab title="标签 1">内容 1</van-tab>
+  <van-tab title="标签 2" disabled>内容 2</van-tab>
+  <van-tab title="标签 3">内容 3</van-tab>
+</van-tabs>
+```
+
+```javascript
+Page({
+  onClickDisabled(event) {
+    wx.showToast({
+      title: `标签 ${event.detail.index + 1} 已被禁用`,
+      icon: 'none'
+    });
+  }
+});
+```
+
+#### 样式风格
+
+`Tab`支持两种样式风格：`line`和`card`，默认为`line`样式，可以通过`type`属性修改样式风格
+
+```html
+<van-tabs type="card">
+  <van-tab title="标签 1">内容 1</van-tab>
+  <van-tab title="标签 2">内容 2</van-tab>
+  <van-tab title="标签 3">内容 3</van-tab>
+</van-tabs>
+```
+
+#### 点击事件
+
+可以在`van-tabs`上绑定`click`事件，在回调参数的`event.detail`中可以取得被点击标签的标题和索引
+
+```html
+<van-tabs bind:click="onClick">
+  <van-tab title="标签 1">内容 1</van-tab>
+  <van-tab title="标签 2">内容 2</van-tab>
+</van-tabs>
+```
+
+```javascript
+Page({
+  onClick(event) {
+    wx.showToast({
+      title: `点击标签 ${event.detail.index + 1}`,
+      icon: 'none'
+    });
+  }
+});
+```
+
+### Tabs API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| active | 当前激活标签的索引 | `String` `Number` | `0` |
+| color | 标签颜色 | `String` | `#f44` |
+| type | 样式风格，可选值为 `card` | `String` | `line` |
+| duration | 动画时间 (单位秒))  | `Number` | `0.2` |
+| line-width | 底部条宽度 (px) | `Number` | 与当前标签等宽 |
+| swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | `Number` | `4` |
+
+### Tab API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| title | 标题 | `String` | - |
+| disabled | 是否禁用标签 | `Boolean` | `false` |
+
+### Tab Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| - | 标签页内容 |
+
+### Tabs Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| bind:click | 点击标签时触发 | index：标签索引，title：标题 |
+| bind:change | 当前激活的标签改变时触发 | index：标签索引，title：标题 |
+| bind:disabled | 点击被禁用的标签时触发 | index：标签索引，title：标题 |

packages/tab/index.js

@@ -0,0 +1,31 @@
+const TABS_PATH = '../tabs/index';
+
+Component({
+  options: {
+    addGlobalClass: true
+  },
+
+  properties: {
+    disabled: Boolean,
+    title: {
+      type: String,
+      observer() {
+        const parent = this.getRelationNodes(TABS_PATH)[0];
+        if (parent) {
+          parent.setLine();
+        }
+      }
+    }
+  },
+
+  relations: {
+    [TABS_PATH]: {
+      type: 'ancestor'
+    }
+  },
+
+  data: {
+    inited: false,
+    active: false
+  }
+});

packages/tab/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/tab/index.wxml

@@ -0,0 +1,7 @@
+<view
+  wx:if="{{ inited }}"
+  class="van-tab__pane"
+  style="{{ active ? '' : 'display: none' }}"
+>
+  <slot />
+</view>

packages/tabs/index.js

@@ -0,0 +1,178 @@
+const TAB_PATH = '../tab/index';
+
+Component({
+  options: {
+    addGlobalClass: true
+  },
+
+  relations: {
+    [TAB_PATH]: {
+      type: 'descendant',
+
+      linked(target) {
+        const { tabs } = this.data;
+        tabs.push({
+          instance: target,
+          data: target.data
+        });
+        this.setData({
+          tabs,
+          scrollable: tabs.length > this.data.swipeThreshold
+        });
+        this.setActiveTab();
+      },
+
+      unlinked(target) {
+        const tabs = this.data.tabs.filter(item => item.instance !== target);
+        this.setData({
+          tabs,
+          scrollable: tabs.length > this.data.swipeThreshold
+        });
+        this.setActiveTab();
+      }
+    }
+  },
+
+  properties: {
+    color: {
+      type: String,
+      observer: 'setLine'
+    },
+    lineWidth: {
+      type: Number,
+      observer: 'setLine'
+    },
+    active: {
+      type: null,
+      value: 0
+    },
+    type: {
+      type: String,
+      value: 'line'
+    },
+    duration: {
+      type: Number,
+      value: 0.2
+    },
+    swipeThreshold: {
+      type: Number,
+      value: 4,
+      observer() {
+        this.setData({
+          scrollable: this.data.tabs.length > this.data.swipeThreshold
+        });
+      }
+    }
+  },
+
+  data: {
+    tabs: [],
+    lineStyle: '',
+    scrollLeft: 0
+  },
+
+  ready() {
+    this.setLine();
+    this.scrollIntoView();
+  },
+
+  methods: {
+    trigger(eventName, index) {
+      this.triggerEvent(eventName, {
+        index,
+        title: this.data.tabs[index].data.title
+      });
+    },
+
+    onTap(event) {
+      const { index } = event.currentTarget.dataset;
+      if (this.data.tabs[index].data.disabled) {
+        this.trigger('disabled', index);
+      } else {
+        this.trigger('click', index);
+        this.setActive(index);
+      }
+    },
+
+    setActive(active) {
+      if (active !== this.data.active) {
+        this.trigger('change', active);
+        this.setData({ active });
+        this.setActiveTab();
+        this.setLine();
+        this.scrollIntoView();
+      }
+    },
+
+    getRect(selector, callback, all) {
+      wx.createSelectorQuery()
+        .in(this)[all ? 'selectAll' : 'select'](selector)
+        .boundingClientRect(rect => {
+          rect && callback(rect);
+        })
+        .exec();
+    },
+
+    setLine() {
+      if (this.data.type !== 'line') {
+        return;
+      }
+
+      this.getRect('.van-tab', rects => {
+        const rect = rects[this.data.active];
+        const width = this.data.lineWidth || rect.width;
+        let left = rects
+          .slice(0, this.data.active)
+          .reduce((prev, curr) => prev + curr.width, 0);
+        left += (rect.width - width) / 2;
+
+        this.setData({
+          lineStyle: `
+            width: ${width}px;
+            background-color: ${this.data.color};
+            transform: translateX(${left}px);
+            transition-duration: ${this.data.duration}s;
+          `
+        });
+      }, true);
+    },
+
+    setActiveTab() {
+      this.data.tabs.forEach((item, index) => {
+        const data = {
+          active: index === this.data.active
+        };
+
+        if (data.active) {
+          data.inited = true;
+        }
+
+        if (data.active !== item.instance.data.active) {
+          item.instance.setData(data);
+        }
+      });
+    },
+
+    // scroll active tab into view
+    scrollIntoView(immediate) {
+      if (!this.data.scrollable) {
+        return;
+      }
+
+      this.getRect('.van-tab', 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;
+
+        this.getRect('.van-tabs__nav', navRect => {
+          const navWidth = navRect.width;
+          this.setData({
+            scrollLeft: offsetLeft - (navWidth - tabWidth) / 2
+          });
+        });
+      }, true);
+    }
+  }
+});

packages/tabs/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/tabs/index.pcss

@@ -0,0 +1,125 @@
+@import '../common/style/var.pcss';
+
+$van-tabs-line-height: 44px;
+$van-tabs-card-height: 30px;
+
+.van-tabs {
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+
+  &__wrap {
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    position: absolute;
+
+    &--page-top {
+      position: fixed;
+    }
+
+    &--content-bottom {
+      top: auto;
+      bottom: 0;
+    }
+
+    &--scrollable {
+      .van-tab {
+        flex: 0 0 22%;
+      }
+    }
+  }
+
+  &__nav {
+    display: flex;
+    user-select: none;
+    position: relative;
+    background-color: $white;
+
+    &--line {
+      height: 100%;
+    }
+
+    &--card {
+      margin: 0 15px;
+      border-radius: 2px;
+      box-sizing: border-box;
+      border: 1px solid $red;
+      height: $van-tabs-card-height;
+
+      .van-tab {
+        color: $red;
+        border-right: 1px solid $red;
+        line-height: calc($van-tabs-card-height - 2px);
+
+        &:last-child {
+          border-right: none;
+        }
+
+        &.van-tab--active {
+          color: $white;
+          background-color: $red;
+        }
+      }
+    }
+  }
+
+  &__line {
+    z-index: 1;
+    left: 0;
+    bottom: 0;
+    height: 2px;
+    position: absolute;
+    background-color: $red;
+  }
+
+  &--line {
+    padding-top: $van-tabs-line-height;
+
+    .van-tabs__wrap {
+      height: $van-tabs-line-height;
+    }
+  }
+
+  &--card {
+    padding-top: $van-tabs-card-height;
+
+    .van-tabs__wrap {
+      height: $van-tabs-card-height;
+    }
+  }
+}
+
+.van-tab {
+  flex: 1;
+  cursor: pointer;
+  padding: 0 5px;
+  font-size: 14px;
+  position: relative;
+  color: $text-color;
+  line-height: $van-tabs-line-height;
+  text-align: center;
+  box-sizing: border-box;
+  background-color: $white;
+  min-width: 0; /* hack for flex ellipsis */
+
+  span {
+    display: block;
+  }
+
+  &:active {
+    background-color: $active-color;
+  }
+
+  &--active {
+    color: $red;
+  }
+
+  &--disabled {
+    color: $gray;
+
+    &:active {
+      background-color: $white;
+    }
+  }
+}

packages/tabs/index.wxml

@@ -0,0 +1,26 @@
+<view class="van-tabs van-tabs--{{ type }}">
+  <view class="van-tabs__wrap {{ scrollable ? 'van-tabs__wrap--scrollable' : '' }} {{ type === 'line' ? 'van-hairline--top-bottom' : '' }}">
+    <scroll-view
+      scroll-x="{{ scrollable }}"
+      scroll-with-animation
+      scroll-left="{{ scrollLeft }}"
+    >
+      <view class="van-tabs__nav van-tabs__nav--{{ type }}">
+        <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
+        <view
+          wx:for="{{ tabs }}"
+          wx:key="index"
+          data-index="{{ index }}"
+          class="van-tab {{ index === active ? 'van-tab--active' : '' }} {{ item.data.disabled ? 'van-tab--disabled' : '' }}"
+          style="{{ color ? 'color: ' + color : '' }}"
+          bind:tap="onTap"
+        >
+          <view class="van-ellipsis">{{ item.data.title }}</view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+  <view class="van-tabs__content">
+    <slot />
+  </view>
+</view>