更新记录

1.0.0（2025-12-07） 下载此版本

appx-subsection 是一款适用于多端（基于 uts 语法）的分段器组件，支持按钮式（button）和分段式（subsection）两种展示模式，可自定义文字颜色、字体大小、激活态加粗等样式，常用于分类切换、选项筛选等场景。

平台兼容性

uni-app x(4.87)

appx-subsection 分段器组件帮助文档

组件介绍

appx-subsection 是一款适用于多端（基于uts语法）的分段器组件，支持按钮式（button）和分段式（subsection）两种展示模式，可自定义文字颜色、字体大小、激活态加粗等样式，常用于分类切换、选项筛选等场景。

组件属性（Props）

组件事件（Events）

组件样式说明

通用样式

• 容器默认宽度100%，采用flex横向布局，选项均分宽度（flex:1）；
• 选项文字默认水平/垂直居中，行高优化避免文字偏移；
• 所有交互样式过渡动画时长为0.2s（背景色、下划线宽度）。

不同模式样式差异

使用示例

基础使用（button模式）

<template>
  <appx-subsection 
    :list="['推荐', '热点', '财经']" 
    :current="1"
    @change="handleChange"
  />
</template>

<script lang="uts" setup>
const handleChange = (index: number) => {
  console.log('选中索引：', index);
};
</script>

自定义样式（subsection模式）

<template>
  <appx-subsection 
    :list="['全部', '待付款', '待发货', '已完成']" 
    mode="subsection"
    activeColor="#ff6700"
    inactiveColor="#666666"
    :fontSize="14"
    :bold="false"
    @change="handleChange"
  />
</template>

<script lang="uts" setup>
const handleChange = (index: number) => {
  console.log('选中索引：', index);
};
</script>

注意事项

1. list参数必须传入非空的纯字符串数组，否则组件会输出错误提示且无法正常渲染；
2. current参数建议传入非负整数，若传入字符串类型的数字（如"2"），组件会自动转换为数字；
3. mode参数仅支持'button'和'subsection'两个值，传入其他值会自动修正为button并输出警告；
4. bgColor仅对button模式生效，bold仅对subsection模式生效，设置前需确认组件模式；
5. 组件宽度默认100%，可通过父容器控制宽度，内部选项会自动均分宽度。