全部产品

Stepper 步进器

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

注意:

  • 输入最大值无提示,超过最大值时系统会自动回显数值为最大值。
  • 不支持输入小数,可通过 +- 改变数值大小。

扫码体验

image.png

示例代码

// 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最小值。Number0
max最大值。Number10000
value初始值。Number10
step每次改变步数,可以为小数。Number1
onChange变化时回调函数。(value: Number) => void-
disabled禁用。Booleanfalse
readOnlyinput 只读。Booleanfalse
showNumber是否显示数值,默认不显示。Booleanfalse