Segmented Control 分段器
使用指南
在 page.json 中引入组件
"usingComponents": {
"w-segmented-control": "wuss-weapp/w-segmented-control/index",
}
图片演示
代码演示
<view
style="margin: 30px 0;"
hover-class="none"
hover-stop-propagation="false"
>
<w-segmented-control styles="font-size: 14px;" options="{{ options1 }}" />
</view>
<view
style="margin: 30px 0;"
hover-class="none"
hover-stop-propagation="false"
>
<w-segmented-control
color="#1c75f3"
defaultIndex="2"
styles="font-size: 14px;"
options="{{ options2 }}"
/>
</view>
<view
style="margin: 30px 0;"
hover-class="none"
hover-stop-propagation="false"
>
<w-segmented-control
color="#e42112"
defaultIndex="1"
styles="font-size: 14px;"
options="{{ options3 }}"
/>
</view>
<view
style="margin: 30px 0;"
hover-class="none"
hover-stop-propagation="false"
>
<w-segmented-control
disabled
color="green"
styles="font-size: 14px;"
options="{{ options4 }}"
/>
</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 插槽
Class 自定义类名
类名 |
说明 |
wuss-class |
根节点样式类 |
wuss-placeholder-class |
验证码输入框的placeholder样式 |