Tab 标签页

提供 wx-tab 和 wx-tab-item 两个组件。

基本用法

<wx-tab v-model="t1">
  <wx-tab-item :label="`标签${i}`" v-for="i in 4" :key="'t1'+ i">内容{{i}}</wx-tab-item>
</wx-tab>

<script>
export default {
  data() {
    return {
      t1: 1
    };
  }
};
</script>

索引或标签名绑定

<wx-tab v-model="t2">
  <wx-tab-item label="标签1">内容1</wx-tab-item>
  <wx-tab-item label="标签2">内容2</wx-tab-item>
  <wx-tab-item label="标签3" name="l3">内容3</wx-tab-item>
</wx-tab>

<script>
export default {
  data() {
    return {
      t2: "l3"
    };
  }
};
</script>

bar高度/激活颜色/不可用

<wx-tab v-model="t3" :line-height="1" active-color="#ee0a24">
  <wx-tab-item label="标签1">内容1</wx-tab-item>
  <wx-tab-item label="标签2">内容2</wx-tab-item>
  <wx-tab-item label="标签3" disabled>内容3</wx-tab-item>
  <wx-tab-item label="标签4">内容4</wx-tab-item>
</wx-tab>

<script>
export default {
  data() {
    return {
      t3: 0
    };
  }
};
</script>

事件

<wx-tab v-model="t4" @item-click="handleClick">
  <wx-tab-item label="标签1">内容1</wx-tab-item>
  <wx-tab-item label="标签2">内容2</wx-tab-item>
  <wx-tab-item label="标签3" disabled>内容3</wx-tab-item>
</wx-tab>

<script>
export default {
  data() {
    return {
      t4: 0
    };
  },
  methods: {
    handleClick(index) {
      this.$toast(`标签页${index}`);
    }
  }
};
</script>

可滚动（滚动阀值）

<wx-tab v-model="t5" :scroll-threshold="4">
  <wx-tab-item :label="`标签${i}`" v-for="i in 12" :key="'t1'+ i">内容{{i}}</wx-tab-item>
</wx-tab>

<script>
export default {
  data() {
    return {
      t5: 0
    };
  }
};
</script>

固定导航模式

<wx-tab v-model="t1" mode="fixed">
  <wx-tab-item :label="`标签${i}`" v-for="i in 4" :key="'t1'+ i">内容{{i}}</wx-tab-item>
</wx-tab>

<script>
export default {
  data() {
    return {
      t1: 1
    };
  }
};
</script>

Tab Attributes

参数	说明	类型	可选值	默认值
v-model/value	绑定值	String/Number	-	-
lineHeight	底部条高度，默认单位px	Number	-	-
activeColor	选中标签项颜色	String	-	-
scrollThreshold	开启滚动阀值	Number	-	4
mode	展示模式	String	custom、fixed、sticky	custom

Tab Events

事件名称	说明	回调参数
itemClick	点击标签项时触发	index: String/Number，绑定值

Tab-item Attributes

参数	说明	类型	可选值	默认值
label	标签项标题	String	-	-
name	标签项名称，用于标签页绑定	String	-	-
disabled	禁用状态	Boolean	-	false

标签页