用作增加或者减少当前数值。
注意:
- 输入最大值无提示,超过最大值时系统会自动回显数值为最大值。
- 不支持输入小数,可通过 + 和 - 改变数值大小。
扫码体验
示例代码
// API-DEMO page/component/stepper/stepper.json
{
"defaultTitle": "Stepper",
"usingComponents":{
"stepper": "mini-antui/es/stepper/index",
"list": "mini-antui/es/list/index",
"list-item": "mini-antui/es/list/list-item/index"
}
}
<!-- API-DEMO page/component/stepper/stepper.axml -->
<list>
<list-item disabled="{{true}}">
Show number value
<view slot="extra">
<stepper onChange="callBackFn" step="{{1}}" showNumber readOnly="{{false}}" value="{{value}}" min="{{2}}" max="{{12}}" />
</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}}" max="{{12}}" />
</view>
</list-item>
<list-item disabled="{{true}}">
Disabled
<view slot="extra">
<stepper onChange="callBackFn" showNumber value="{{11}}" min="{{2}}" max="{{12}}" disabled />
</view>
</list-item>
<list-item disabled="{{true}}">
readOnly
<view slot="extra">
<stepper onChange="callBackFn" showNumber value="{{11}}" min="{{2}}" max="{{12}}" readOnly />
</view>
</list-item>
<list-item>
<button onTap="modifyValue">修改stepper初始值</button>
</list-item>
</list>
// API-DEMO page/component/stepper/stepper.js
Page({
data: {
value: 8,
},
callBackFn(value){
console.log(value);
},
modifyValue() {
this.setData({
value: this.data.value + 1,
});
}
});
属性
属性名 | 描述 | 类型 | 默认值 | 必填 |
min | 最小值。 | Number | 0 | 是 |
max | 最大值。 | Number | 10000 | 是 |
value | 初始值。 | Number | 10 | 是 |
step | 每次改变步数,可以为小数。 | Number | 1 | 否 |
onChange | 变化时回调函数。 | (value: Number) => void | - | 否 |
disabled | 禁用。 | Boolean | false | 否 |
readOnly | input 只读。 | Boolean | false | 否 |
showNumber | 是否显示数值,默认不显示。 | Boolean | false | 否 |
在文档使用中是否遇到以下问题
更多建议
匿名提交