fs-weapp/tab

Tab 标签页

使用指南

在 app.json 或 index.json 中引入tabs、tab组件

{
  "usingComponents": {
    "fs-tabs": "path/components/tabs/index",
    "fs-tab": "path/components/tab/index"
  }
}
1
2
3
4
5
6

代码演示

基本使用

<fs-tabs bind:click="onClick" bind:change="onChange">
  <fs-tab title="标签一">内容一</fs-tab>
  <fs-tab title="标签二">内容二</fs-tab>
  <fs-tab title="标签三">内容三</fs-tab>
  <fs-tab title="标签四">内容四</fs-tab>
</fs-tabs>
1
2
3
4
5
6

禁用某项

<fs-tabs bind:disabled="onDisabled">
  <fs-tab title="标签一">内容一</fs-tab>
  <fs-tab title="标签二">内容二</fs-tab>
  <fs-tab title="标签三" disabled>内容三</fs-tab>
  <fs-tab title="标签四">内容四</fs-tab>
</fs-tabs>
1
2
3
4
5
6
// pages/tab/index.js
Page({
  onClick (e) {
    wx.showToast({
      title: `点击标签 ${e.detail.index + 1}`,
      icon: 'none'
    })
  },
  onChange(e) {
    wx.showToast({
      title: `切换到标签 ${e.detail.index + 1}`,
      icon: 'none'
    })
  },
  onDisabled(e) {
    wx.showToast({
      title: `标签 ${e.detail.index + 1}已禁用，不能切换`,
      icon: 'none'
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

横向滚动

<fs-tabs>
  <fs-tab title="标签一">内容一</fs-tab>
  <fs-tab title="标签二">内容二</fs-tab>
  <fs-tab title="标签三">内容三</fs-tab>
  <fs-tab title="标签四">内容四</fs-tab>
  <fs-tab title="标签五">内容五</fs-tab>
  <fs-tab title="标签六">内容六</fs-tab>
  <fs-tab title="标签七">内容七</fs-tab>
  <fs-tab title="标签八">内容八</fs-tab>
  <fs-tab title="标签九">内容九</fs-tab>
</fs-tabs>
1
2
3
4
5
6
7
8
9
10
11

样式风格

<fs-tabs type="card">
  <fs-tab title="标签一">内容一</fs-tab>
  <fs-tab title="标签二">内容二</fs-tab>
  <fs-tab title="标签三">内容三</fs-tab>
  <fs-tab title="标签四">内容四</fs-tab>
</fs-tabs>
1
2
3
4
5
6

切换动画

<fs-tabs animated>
  <fs-tab title="标签一">内容一</fs-tab>
  <fs-tab title="标签二">内容二</fs-tab>
  <fs-tab title="标签三">内容三</fs-tab>
  <fs-tab title="标签四">内容四</fs-tab>
</fs-tabs>
1
2
3
4
5
6

滑动切换

<fs-tabs swipeable>
  <fs-tab title="标签一">内容一</fs-tab>
  <fs-tab title="标签二">内容二</fs-tab>
  <fs-tab title="标签三">内容三</fs-tab>
  <fs-tab title="标签四">内容四</fs-tab>
</fs-tabs>
1
2
3
4
5
6

滑动切换动画

<fs-tabs swipeable animated>
  <fs-tab title="标签一">内容一</fs-tab>
  <fs-tab title="标签二">内容二</fs-tab>
  <fs-tab title="标签三">内容三</fs-tab>
  <fs-tab title="标签四">内容四</fs-tab>
</fs-tabs>
1
2
3
4
5
6

Tabs属性

参数 说明 类型 默认值
color 标签和线的颜色 String -
active 当前激活标签的索引 Number 0
type 样式风格，可选值为default, card String default
swipeThreshold 滚动阈值，设置标签数量超过多少个可滚动 Number 4
animated 是否使用动画切换 Tabs Boolean false
swipeable 是否开启手势滑动切换 Boolean -

Tab属性

参数 说明 类型 默认值
title 标题 String -
disabled 是否禁用标签 Boolean -

Tab插槽

名称 说明
- 默认插槽

Tabs事件

名称 说明 回调参数
bind:disabled 点击被禁用的标签时触发 index：标签索引，title：标题
bind:click 点击标签时触发 index：标签索引，title：标题
bind:change 当前激活的标签改变时触发 index：标签索引，title：标题

← NavBar 导航 →