Wot Design Uni 上新 Segmented 分段器，赶快进来看看效果吧！

不如摸鱼去

已于 2023-10-08 15:10:55 修改

阅读量178

点赞数

分类专栏： uni-app开发实践文章标签： uni-app 微信小程序小程序 vue 前端

于 2023-09-28 13:16:38 首次发布

本文链接：https://blog.csdn.net/qq_31647491/article/details/133382319

版权

uni-app开发实践专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Segmented 分段器

何时使用

用于展示多个选项并允许用户选择其中单个选项；
当切换选中选项时，关联区域的内容会发生变化。

地址

Github
文档网站
 插件市场
 QQ群

先看交互效果

在这里插入图片描述

大型分段器

通过设置 size 属性为 "large"，创建一个大型分段器。

<wd-segmented :options="list" v-model:value="current" size="large"></wd-segmented>

默认分段器

这是默认尺寸的分段器。

<wd-segmented :options="list" v-model:value="current1"></wd-segmented>

小型分段器

通过设置 size 属性为 "small"，创建一个小型分段器。

<wd-segmented :options="list" v-model:value="current2" size="small"></wd-segmented>

带振动效果的分段器

通过设置 vibrate-short 属性为 true，使手机在切换选项时产生短暂振动。

<wd-segmented :options="list" v-model:value="current3" :vibrate-short="true"></wd-segmented>

禁用分段器

通过设置 disabled 属性为 true，禁用分段器。

<wd-segmented :options="list" v-model:value="current5" disabled></wd-segmented>

自定义渲染分段器标签

使用插槽 label 可以自定义渲染分段器的标签内容。

<wd-segmented :options="list1" v-model:value="current4" :vibrate-short="true">
  <template #label="{ option }">
    <view class="section-slot">
      <wd-img round width="32px" height="32px" :src="option.payload.avatar" />
      <view class="name">
        {{ option.value }}
      </view>
    </view>
  </template>
</wd-segmented>

const list1 = ref([
  {
    value: '李雷',
    disabled: false,
    payload: {
      avatar: 'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/redpanda.jpg'
    }
  },
  {
    value: '韩梅梅',
    disabled: false,
    payload: {
      avatar: 'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/capybara.jpg'
    }
  }
])

.section {
  width: 100%;
  padding: 0 24rpx;
  box-sizing: border-box;
  &-slot {
    padding: 4px;
  }
}

请注意，上述示例代码中的 list 和 list1 变量是您在 <script> 部分设置的示例数据。您可以根据您的实际需求自定义这些数据。

Attributes

参数	说明	类型	可选值	默认值	最低版本
value/v-model:value	当前选中的值	string \| number	-	-	0.1.23
disabled	是否禁用分段器	boolean	true \| false	`false`	0.1.23
size	控件尺寸	string	`large` \| `middle` \| `small`	`middle`	0.1.23
options	数据集合	`string[] \| number[] \| SegmentedOption[]`	-	[]	0.1.23
vibrateShort	切换选项时是否振动	boolean	true \| false	`false`	0.1.23