基础组件
布局
操作反馈
表单
其他
# 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 插槽
名称 | 说明 |
---|---|
slot | 指定的图片验证码 |
# Class 自定义类名
类名 | 说明 |
---|---|
wuss-class | 根节点样式类 |
wuss-placeholder-class | 验证码输入框的placeholder样式 |