# Segmented Control 分段器 - 图1 Wuss-weapp

首页

组件库

快速上手

GitHub

首页

组件库

快速上手

GitHub

基础组件

  • 布局

操作反馈

  • 表单

  • 其他

# Segmented Control 分段器

# 使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2. "w-segmented-control": "wuss-weapp/w-segmented-control/index",
  3. }

# 图片演示

# Segmented Control 分段器 - 图2

# 代码演示

  1. <view
  2. style="margin: 30px 0;"
  3. hover-class="none"
  4. hover-stop-propagation="false"
  5. >
  6. <w-segmented-control styles="font-size: 14px;" options="{{ options1 }}" />
  7. </view>
  8. <view
  9. style="margin: 30px 0;"
  10. hover-class="none"
  11. hover-stop-propagation="false"
  12. >
  13. <w-segmented-control
  14. color="#1c75f3"
  15. defaultIndex="2"
  16. styles="font-size: 14px;"
  17. options="{{ options2 }}"
  18. />
  19. </view>
  20. <view
  21. style="margin: 30px 0;"
  22. hover-class="none"
  23. hover-stop-propagation="false"
  24. >
  25. <w-segmented-control
  26. color="#e42112"
  27. defaultIndex="1"
  28. styles="font-size: 14px;"
  29. options="{{ options3 }}"
  30. />
  31. </view>
  32. <view
  33. style="margin: 30px 0;"
  34. hover-class="none"
  35. hover-stop-propagation="false"
  36. >
  37. <w-segmented-control
  38. disabled
  39. color="green"
  40. styles="font-size: 14px;"
  41. options="{{ options4 }}"
  42. />
  43. </view>
data: {
  options1: ['Segment1','Segment2'],
  options2: ['Segment1','Segment2','Segment3','Segment4'],
  options3: ['Segment1','Segment2','Segment3'],
  options4: ['Segment1','Segment2','Segment3'],
},

# API

# Attribute 属性

属性 说明 类型 默认值
options 传入的选项组 ['xxx','xxx','xxx','xxx'] string []
color 组件的主色调 string #ff9900
disabled 禁用 boolean -
defaultIndex 初始化默认的索引 number 0
styles 自定义样式 string -

# Event 事件

事件名 说明 参数
onChange 值改变时触发 e.detail.value

# Slot 插槽

名称 说明
slot 指定的图片验证码

# Class 自定义类名

类名 说明
wuss-class 根节点样式类
wuss-placeholder-class 验证码输入框的placeholder样式

Edit this page

Tabs 导航切换栏 ActionSheet 操作菜单