分段选择器

基本使用

vue

<template>
  <view>
    <jp-section-selector :current="0" vibrate-short :list="['success', 'error', 'warning']" @change="change"></jp-section-selector>
  </view>
</template>

<script lang="ts" setup>
const change = (index) => {}
</script>

<style scoped lang="scss"></style>

自定义样式 activeColor、buttonColor

vue

<template>
  <view>
    <jp-section-selector
      active-color="#ff5320"
      button-color="#333"
      :current="0"
      vibrate-short
      :list="['success', 'error', 'warning']"
      @change="change"
    ></jp-section-selector>
  </view>
</template>

<script lang="ts" setup>
const change = (index) => {}
</script>

<style scoped lang="scss"></style>

props

属性列表：

属性名	类型	默认值	描述
list	Array	[]	tab 的数据
current	Number/String	0	当前活动的 tab 的 index
activeColor	String	[themeStyle.primary]	激活的颜色
mode	String	'button'	模式选择，'button'为按钮形式，'subsection'时为分段模式
fontSize	Number/String	28	字体大小，单位 rpx
animation	Boolean	true	是否开启动画效果
height	Number/String	70	组件的高度，单位 rpx
bold	Boolean	true	激活 tab 的字体是否加粗
bgColor	String	'#eeeeef'	当 mode='button'时，组件背景颜色
buttonColor	String	'#ffffff'	当 mode='button'时，滑块背景颜色
vibrateShort	Boolean	false	在切换分段器的时候，是否让设备震一下
inactiveColor	String	'#333'	非激活 tab 的字体颜色

事件列表：

事件名	描述
change	切换 tab 时触发的事件

分段选择器 ​

基本使用 ​

自定义样式 activeColor、buttonColor ​

props ​

分段选择器

基本使用

自定义样式 activeColor、buttonColor

props