【组件】标签栏组件 | vivo卡片组件库

# 【组件】标签栏组件

# 描述

jovi 主页标签栏组件

# 使用效果

# 使用方法

在.ux文件中引入组件

<import
  name="component-tabs"
  src="vivo-cards-suits/components/jovi/component-tabs/index.ux"
></import>

1
2
3
4

# 示例

<template>
  <div class="card">
    <component-tabs
      id="tabs"
      tabs="{{tabs}}"
      current="{{current}}"
      tab-align="{{tabAlign}}"
      add="{{add}}"
      onclicktab="handleClickTab"
      onclickadd="handleClickAdd"
    ></component-tabs>
    <swiper
      id="swiper"
      class="tab-content-swiper"
      indicator="{{false}}"
      loop="{{false}}"
      onchange="handleChangeSwiper"
    >
      <div class="tab-content" for="{{tabs}}">
        <text>{{ $item }}</text>
      </div>
    </swiper>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabs: ["欧冠", "英超", "西甲", "德甲", "NBA"],
        // tabs: ['欧冠','英超','西甲','德甲','NBA','欧冠','英超','西甲','德甲','NBA'],
        current: 0,
        tabAlign: "center", // left center
        add: false
      };
    },
    handleClickTab(e) {
      this.current = e.detail.index;
      this.$element("swiper").swipeTo({ index: e.detail.index }); // 点击tab时，内容页跟随切换
    },
    handleClickAdd() {
      console.log("点击添加按钮");
    },
    handleChangeSwiper(e) {
      this.current = e.index;
      this.$child("tabs").scrollTo(e.index); // 滑动内容页时，tab跟随切换
    }
  };
</script>

<style lang="less">
  .card {
    width: 100%;
    flex-direction: column;
    .tab-content-swiper {
      width: 100%;
      height: 500px;
      background-color: #eee;
      .tab-content {
        flex: 1;
        text {
          flex: 1;
          text-align: center;
        }
      }
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

# API

# 组件属性

属性	类型	默认值	说明
tabs	Array	-	标签栏数据，标签数量超过 5 个可横向滚动
current	Number	-	选中的标签下标
tabAlign	String	left	标签对齐方式，可选值：left, center；当设置 center 时，tab 数量小于 5 时会自适应居中
add	Boolean	false	是否显示添加按钮

# 组件事件

事件名称	事件描述	返回值
clicktab	点击标签触发	{index: '标签下标'}
clickadd	点击添加按钮触发	-

← 【组件】搜索栏【组件】卡片附属内容区组件 →

# 【组件】 标签栏组件