The stepper is used to increase or decrease the current value.
Property | Description | Type | Default value | Mandatory |
---|---|---|---|---|
min | The minimum value. | Number | 0 | true |
max | The maximum value. | Number | 10000 | true |
value | Initial value | Number | 10 | true |
step | Number of steps changed each time, which can be a decimal. | Number | 1 | false |
onChange | Callback when a change occurs. | (value: Number) => void | - | false |
disabled | Whether the function is disabled. | Boolean | false | false |
readOnly | Whether the input is readonly. | Boolean | false | false |
showNumber | Whether to display the value. The value is not displayed by default. | Boolean | false | false |
Sample code
{
"defaultTitle": "Stepper",
"usingComponents":{
"stepper": "mini-antui/es/stepper/index",
"list": "mini-antui/es/list/index",
"list-item": "mini-antui/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}}" 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">Change the initial value of stepper.</button>
</list-item>
</list>
Page({
data: {
value: 8,
},
callBackFn(value){
console.log(value);
},
modifyValue() {
this.setData({
value: this.data.value + 1,
});
}
});