更新记录

1.0.0（2026-07-13） 下载此版本

初始版本

平台兼容性

uni-app(4.0)

zv-segmented

分段器，支持滑动块、边框按钮、卡片、文字下划线等样式。

基础用法（slider，默认，兼容旧版）

<zv-segmented
  :tabs="['全部', '待支付', '已完成']"
  :item-w="200"
  :item-h="80"
  :radius="50"
  bg-color="#fff"
  @change="onChange"
/>

样式类型 type

基础使用（button）

<zv-segmented
  type="button"
  shape="round"
  :tabs="['未付款', '待评价', '已付款']"
  :item-w="220"
  :item-h="72"
  bg-color="#ffffff"
  select-bg-color="#2979ff"
  select-color="#ffffff"
  :border-width="2"
/>

卡片样式（card）

<zv-segmented
  type="card"
  shape="round"
  :tabs="['未付款', '待评价', '已付款']"
  :item-w="220"
  :item-h="72"
  bg-color="#f2f3f5"
  select-bg-color="#ffffff"
  select-color="#2979ff"
  color="#333333"
/>

card 模式：select-bg-color = 滑块背景色，select-color = 选中文字色（勿与 slider 模式混淆）

文字样式（text）

<zv-segmented
  type="text"
  :tabs="['未付款', '待评价', '已付款']"
  :item-w="220"
  :item-h="72"
  select-bg-color="#2979ff"
  color="#666666"
/>

插槽

<zv-segmented type="card" :tabs="tabs" block :item-h="120">
  <template #item="{ item, index, active, label }">
    <view class="col center">
      <image :src="item.icon" style="width:48rpx;height:48rpx;" />
      <text :style="{ color: active ? '#2979ff' : '#333' }">{{ label }}</text>
    </view>
  </template>
</zv-segmented>

受控 / v-model

<zv-segmented v-model="current" :tabs="tabs" type="card" block />
<!-- 或使用 select -->
<zv-segmented :select="current" :tabs="tabs" @change="current = $event" />

主要参数

change 事件

(index, item) — index 为选中下标，item 为对应数据项。

实际效果可进入小程序查看