TuniaoUI

# Subsection 分段器

该分段器一般用于用户从几个选项中选择某一个的场景

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ 兼容中 兼容中 兼容中 兼容中

# 基本使用

<template>
  <tn-subsection :list="list"></tn-subsection>
</template>

<script>
export default {
  data() {
    return {
      list: ['全部','未付款','待发货','待收货','待评价'],
    }
  }
}
</script>

# 按钮模式

button 按钮模式 subsection 分段模式

<template>
  <tn-subsection :list="list" mode="button"></tn-subsection>
  <view class="tn-margin-top">
    <tn-subsection :list="list" mode="button" :borderRadius="50"></tn-subsection>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['全部','未付款','待发货','待收货','待评价'],
    }
  }
}
</script>

# 取消切换动画

<template>
  <tn-subsection :list="list" :animation="false"></tn-subsection>
</template>

<script>
export default {
  data() {
    return {
      list: ['全部','未付款','待发货','待收货','待评价'],
    }
  }
}
</script>

# 贝塞尔曲线切换动画

<template>
  <tn-subsection :list="list" animationType="cubic-bezier"></tn-subsection>
  <view class="tn-margin-top">
    <tn-subsection :list="list" mode="button" :borderRadius="50" animationType="cubic-bezier"></tn-subsection>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['全部','未付款','待发货','待收货','待评价'],
    }
  }
}
</script>

# 选中字体设置为粗体

<template>
  <tn-subsection :list="list" :bold="true"></tn-subsection>
</template>

<script>
export default {
  data() {
    return {
      list: ['全部','未付款','待发货','待收货','待评价'],
    }
  }
}
</script>

# 自定义样式


<template>
  <tn-subsection :list="list" :height="40" :fontSize="20"></tn-subsection>
  <view class="tn-margin-top">
    <tn-subsection :list="list" mode="button" :borderRadius="50" backgroundColor="tn-cool-bg-color-9"
                   buttonColor="tn-cool-bg-color-7" inactiveColor="#FFFFFF" activeColor="#27A1BA"></tn-subsection>
  </view>
  <view class="tn-margin-top">
    <tn-subsection :list="list" :borderRadius="50" backgroundColor="#FFFFFF" buttonColor="#E83A30"
                   inactiveColor="#838383"></tn-subsection>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['全部', '未付款', '待发货', '待收货', '待评价'],
    }
  }
}
</script>

# API

# Subsection Props

属性名 说明 类型 默认值 可选值
mode button 按钮模式 subsection 分段模式 String subsection button/subsection
height 组件高度 Number 60 -
list tab的数据 Array [] -
current 当前活动tab的index Number/String 0 -
activeColor 激活时的字体颜色 String #FFFFFF -
inactiveColor 未激活时的字体颜色 String #AAAAAA -
bold 激活tab的字体是否加粗 Boolean false true/false
backgroundColor 背景颜色 String #F4F4F4 -
buttonColor 滑块的颜色 String #01BEFF -
list tab的数据 Array [] -
borderRadius 当mode为button时生效，圆角的值，单位rpx Number 10 -
animation 是否开启动画 Boolean true true/false
animationType 动画类型 cubic-bezier -> 贝塞尔曲线 String '' -
vibrateShort 滑动滑块是否触发震动 Boolean false true/false

# Subsection Event

事件名称 说明 回调参数
change 点击事件 {index:0,name:"全部"}

← Empty 内容为空 →