Stepper 步进器

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

注意：

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

扫码体验

示例代码

// 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,
    });
  }
});

属性