Stepper
Increase or decrease the current value.
Note:
• No prompt for input of maximum. If it exceeds the maximum, the system automatically displays the value as the maximum.
• Input of decimal is not supported. It is possible to use + and - to change value.
Sample Code
copy
// 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"
}
}
copy
<!-- 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">Modify stepper initial value</button>
</list-item>
</list>
copy
// API-DEMO page/component/stepper/stepper.js
Page({
data: {
value: 8,
},
callBackFn(value){
console.log(value);
},
modifyValue() {
this.setData({
value: this.data.value + 1,
});
}
});
Attributes
Property | Description | Type | Default | Required |
min | Minimum. | Number | 0 | Yes |
max | Maximum. | Number | 10000 | Yes |
value | Initial value. | Number | 10 | Yes |
step | Change step, can be a decimal. | Number | 1 | No |
onChange | Change callback function. | (value: Number) => void | - | No |
disabled | Disabled. | Boolean | false | No |
readOnly | Input read-only. | Boolean | false | No |
showNumber | Show number or not, not shown by default. | Boolean | false | No |