支付宝小程序其他手势 步进器·Stepper

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

注意：

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

扫码体验

示例代码

{
 "defaultTitle": "Stepper",
 "usingComponents":{
   "stepper": "mini-ali-ui/es/stepper/index",
   "list": "mini-ali-ui/es/list/index",
   "list-item": "mini-ali-ui/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}}"
       inputWidth="60px"
       min="{{2}}"
       />
   </view>
 </list-item>
 <list-item disabled="{{true}}">
   step: 0.01
   <view slot="extra">
     <stepper
       onChange="callBackFn"
       step="{{0.01}}"
       showNumber
       readOnly="{{false}}"
       value="{{value}}"
       min="{{2}}"
       />
   </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}}"
       />
   </view>
 </list-item>
 <list-item disabled="{{true}}">
   Disabled
   <view slot="extra">
     <stepper
       onChange="callBackFn"
       showNumber
       value="{{11}}"
       min="{{2}}"
       disabled
       />
   </view>
 </list-item>
 <list-item disabled="{{true}}">
   readOnly
   <view slot="extra">
     <stepper
       onChange="callBackFn"
       showNumber
       value="{{11}}"
       min="{{2}}"
       readOnly
       />
   </view>
 </list-item>
</list>
<button onTap="modifyValue">修改setper初始值</button>

Page({
 data: {
   value: 8,
 },
 callBackFn(value) {
   console.log(value);
 },
 modifyValue() {
   this.setData({
     value: 9,
   });
 },
});

属性

Bug & Tip

• readOnly 为 true 后，只可通过 + - 按钮来控制数字增加；
• disabled 为 true 后，步进器将不可用；
• 输入框的宽度由开发者自行设置，默认宽度为 36px；
• onChange 在 1.0.11 版本中新增一个 mode 的返回值，用于判断用户是通过点击（click）还是通过输入（input）的方式改变值，两者之外就是 undefined；