Segmented Control 分段器

使用指南

在 page.json 中引入组件

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

图片演示

SegmentedControl 分段器 - 图1

代码演示

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

API

Attribute 属性

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

Event 事件

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

Slot 插槽

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

Class 自定义类名

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