支付寶小程序其他手勢 步進器·Stepper

用作增加或者減少當前數(shù)值。

注意：

• 輸入最大值無提示，超過最大值時系統(tǒng)會自動回顯數(shù)值為最大值；
• 不支持輸入小數(shù)，可通過 + 和 - 改變數(shù)值大小。

掃碼體驗

示例代碼

{
 "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 后，只可通過 + - 按鈕來控制數(shù)字增加；
• disabled 為 true 后，步進器將不可用；
• 輸入框的寬度由開發(fā)者自行設(shè)置，默認寬度為 36px；
• onChange 在 1.0.11 版本中新增一個 mode 的返回值，用于判斷用戶是通過點擊（click）還是通過輸入（input）的方式改變值，兩者之外就是 undefined；