支付宝小程序其他手势 步进器·Stepper
用作增加或者减少当前数值。
注意：
- 输入最大值无提示，超过最大值时系统会自动回显数值为最大值；
- 不支持输入小数，可通过 + 和 - 改变数值大小。
扫码体验
示例代码
{
"defaultTitle": "Stepper",
"usingComponents":{
"stepper": "mini-ali-ui/es/stepper/index",
"list": "mini-ali-ui/es/list/index",
"list-item": "mini-ali-ui/es/list/list-item/index"
}
}<list>
<list-item disabled="{{true}}">
Show number value
<view slot="extra">
<stepper
onChange="callBackFn"
step="{{1}}"
showNumber
readOnly="{{false}}"
value="{{value}}"
inputWidth="60px"
min="{{2}}"
/>
</view>
</list-item>
<list-item disabled="{{true}}">
step: 0.01
<view slot="extra">
<stepper
onChange="callBackFn"
step="{{0.01}}"
showNumber
readOnly="{{false}}"
value="{{value}}"
min="{{2}}"
/>
</view>
</list-item>
<list-item disabled="{{true}}">
Do not show number value
<view slot="extra">
<stepper
onChange="callBackFn"
step="{{1}}"
readOnly="{{false}}"
value="{{value}}"
min="{{2}}"
/>
</view>
</list-item>
<list-item disabled="{{true}}">
Disabled
<view slot="extra">
<stepper
onChange="callBackFn"
showNumber
value="{{11}}"
min="{{2}}"
disabled
/>
</view>
</list-item>
<list-item disabled="{{true}}">
readOnly
<view slot="extra">
<stepper
onChange="callBackFn"
showNumber
value="{{11}}"
min="{{2}}"
readOnly
/>
</view>
</list-item>
</list>
<button onTap="modifyValue">修改setper初始值</button>Page({
data: {
value: 8,
},
callBackFn(value) {
console.log(value);
},
modifyValue() {
this.setData({
value: 9,
});
},
});属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| className | String | - | 自定义 class。 |
| min | Number | 0 | 最小值。 |
| max | Number | 100000 | 最大值。 |
| value | Number | 10 | 初始值。 |
| step | Number | 1 | 每次改变步数，可以为小数。 |
| onChange | EventHandle | (value: Number, mode: String) => void | 变化时回调函数。 |
| disabled | Boolean | false | 是否禁用。 |
| readOnly | Boolean | false | 是否只读。 |
| showNumber | Boolean | false | 是否显示数值。 |
| inputWidth | String | 36px | 输入框的宽度。 |
Bug & Tip
- readOnly 为 true 后，只可通过 + - 按钮来控制数字增加；
- disabled 为 true 后，步进器将不可用；
- 输入框的宽度由开发者自行设置，默认宽度为 36px；
- onChange 在 1.0.11 版本中新增一个 mode 的返回值，用于判断用户是通过点击（click）还是通过输入（input）的方式改变值，两者之外就是 undefined；