Stepper 步进器

用作增加或者减少当前数值。

扫码体验：
Stepper 步进器 - 图1

属性名描述类型默认值必选
min最小值Number0true
max最大值Number10000true
value初始值Number10true
step每次改变步数，可以为小数Number1false
onChange变化时回调函数(value: Number) => voidfalse
disabled禁用Booleanfalsefalse
readOnlyinput 只读Booleanfalsefalse
showNumber是否显示数值，默认不显示Booleanfalsefalse

示例

  1. {
  2.   "defaultTitle": "Stepper",
  3.   "usingComponents":{
  4.     "stepper": "mini-antui/es/stepper/index",
  5.     "list": "mini-antui/es/list/index",
  6.     "list-item": "mini-antui/es/list/list-item/index"
  7.   }
  8. }
  1. <list>
  2.   <list-item disabled="{{true}}">
  3.     Show number value
  4.     <view slot="extra">
  5.       <stepper onChange="callBackFn" step="{{1}}" showNumber readOnly="{{false}}" value="{{value}}" min="{{2}}" max="{{12}}" />
  6.     </view>
  7.   </list-item>
  8.   <list-item disabled="{{true}}">
  9.     Do not show number value
  10.     <view slot="extra">
  11.       <stepper onChange="callBackFn" step="{{1}}" readOnly="{{false}}" value="{{value}}" min="{{2}}" max="{{12}}" />
  12.     </view>
  13.   </list-item>
  14.   <list-item disabled="{{true}}">
  15.     Disabled
  16.     <view slot="extra">
  17.       <stepper onChange="callBackFn" showNumber value="{{11}}" min="{{2}}" max="{{12}}" disabled />
  18.     </view>
  19.   </list-item>
  20.   <list-item disabled="{{true}}">
  21.     readOnly
  22.     <view slot="extra">
  23.       <stepper onChange="callBackFn" showNumber value="{{11}}" min="{{2}}" max="{{12}}" readOnly />
  24.     </view>
  25.   </list-item>
  26.   <list-item>
  27.     <button onTap="modifyValue">修改stepper初始值</button>
  28.   </list-item>
  29. </list>
  1. Page({
  2.   data: {
  3.     value: 8,
  4.   },
  5.   callBackFn(value){
  6.    console.log(value);
  7.   },
  8.   modifyValue() {
  9.     this.setData({
  10.       value: this.data.value + 1,
  11.     });
  12.   }
  13. });

原文: https://docs.alipay.com/mini/component-ext/stepper