Fast-UI

# fu-tab 标签页

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。

# 平台差异

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序
√ √ √ X X X

# 基本使用

<template>
  <view>
    <fu-tab :tabs="tabs"></fu-tab>
  </view>
</template>
<script>
export default {
  data() {
    return {
      tabs: [
        { name: "标签1", id: 1 },
        { name: "标签2", id: 2 },
        { name: "标签3", id: 3 },
        { name: "标签4", id: 4 },
        { name: "标签5", id: 5 },
        { name: "标签6", id: 6 },
        { name: "标签7", id: 7 },
        { name: "标签8", id: 8 }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# change 事件

  • 可以在 fu-tab 上绑定 change 事件，在回调参数中可以取得被点击标签的标识符和索引
<template>
  <view>
    <fu-tab :tabs="tabs" @change="change"></fu-tab>
  </view>
</template>
<script>
export default {
  data() {
    return {
      tabs: [
        { name: "标签1", id: 1 },
        { name: "标签2", id: 2 },
        { name: "标签3", id: 3 },
        { name: "标签4", id: 4 },
        { name: "标签5", id: 5 },
        { name: "标签6", id: 6 },
        { name: "标签7", id: 7 },
        { name: "标签8", id: 8 }
      ]
    };
  },
  methods: {
    change(val) {
      console.log(val);
    }
  }
};
</script>
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

# 粘性布局

  • 通过 sticky 属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶
<template>
  <view>
    <fu-tab :tabs="tabs" :sticky="true" top="60"></fu-tab>
  </view>
</template>
<script>
export default {
  data() {
    return {
      tabs: [
        { name: "标签1", id: 1 },
        { name: "标签2", id: 2 },
        { name: "标签3", id: 3 },
        { name: "标签4", id: 4 },
        { name: "标签5", id: 5 },
        { name: "标签6", id: 6 },
        { name: "标签7", id: 7 },
        { name: "标签8", id: 8 }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# API

# Props

参数 说明 类型 默认值 可选值
scrollspy tabs 是否可以左右拖动 boolean false
active-color 标签颜色 string #f02523
inactive-color 默认颜色 string #5f5f5f
z-index z-index 层级 number 99
animation 动画 string all .3s ease
line-width 底部条宽度 (rpx) string number 40
line-height 底部条高度 (rpx) string number 4
line-color 底部条颜色 string #f02523
bottom 底部条位置 (rpx) string number 8
height tab 高度 (rpx) string number 96
size 字体大小 (rpx) string number 32
tabs 数据 array
node-title 标签名 string name
node-key 唯一标识 string id
sticky 是否使用粘性布局 boolean false true/false
top 粘性定位布局下与顶部的最小距离，单位 px string number 0

# 事件

事件名 说明 回调参数
change tab 选择变化时触发的事件 当前索引和唯一标识

fu-calendar 日历