如何设置步进器Stepper_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

一种两段式控制，增加、减少或修改数值。输入最大（最小）值无提示，失去焦点后，超过最大（最小）值时系统会自动回显数值为最大值。当作为表单组件，配合 Form/FormItem 组件使用时，需要设置 mode 的值为 form。

属性

属性	类型	必填	默认值	说明
controlled	boolean	否	false	是否受控
value	number	否	-	输入框的值，表单提交的时候有效
type	'number' \| 'digit'	否	-	输入框的类型，表单提交的时候有效
min	number	否	-	最小值
max	number	否	-	最大值
step	number	否	1	每次加减的值
inputWidth	string	否	-	输入框宽度
precision	number	否	-	计算精度，保留几位小数
autoFocus	boolean	否	false	自动聚焦，iOS 可能会失效
id	string	否	-	表单元素 id
name	string	否	-	表单元素 name
disabled	boolean	否	false	是否禁用
mode	'normal' \| 'form'	否	'normal'	配合 Form/FormItem 组件使用时，需设置为 form
className	string	否	-	类名

事件

事件名	说明	类型
onFocus	聚焦时，触发此回调	`( e: number ) => void`
onBlur	失去焦点时，触发此回调	`( e: number ) => void`
onChange	数据变化后，触发此回调	`( e: number, dataSet: Record<string, any> ) => void`

样式类

类名	说明
amd-stepper	整体样式
amd-stepper-disabled	禁用状态下的整体样式
amd-stepper-handler	+/- 图标区域样式
amd-stepper-handler-up	+ 区域样式
amd-stepper-handler-up	- 区域样式
amd-stepper-handler-disabled	禁用状态下 +/- 图标区域样式
amd-stepper-handler-up-inner	+/- 图标样式
amd-stepper-input-wrap	输入框区域样式
amd-stepper-input	输入框样式

代码示例

基本使用

index.axml 的代码示例如下：

<view>
  <demo-block title="基础用法">
    <stepper 
      step="{{1}}"
      value="{{0}}"
      inputWidth="60px"/>
  </demo-block>
  <demo-block title="受控组件">
    <stepper 
      data-a="a"
      controlled
      step="{{1}}"
      value="{{value}}"
      inputWidth="60px"
      onChange="handleChange" />
  </demo-block>
  <demo-block title="步长设置">
    <stepper 
      step="{{0.01}}"
      value="{{0}}"/>
  </demo-block>
  <demo-block title="限制输入范围">
    <stepper 
      min="{{0}}"
      max="{{10}}"
      step="{{1}}"
      value="{{0}}"/>
  </demo-block>
  <demo-block title="禁用状态">
    <stepper 
      value="{{0}}"
      disabled/>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    value: 0,
  },
  handleChange(value, dataSet) {
    this.setData({ value });
    console.log(dataSet)
  },
  handleAddValue() {
    this.setData({ value: this.data.value + 1 });
  },
  handleMinusValue() {
    this.setData({ value: this.data.value - 1 });
  },
});

index.acss 的代码示例如下：

.actions {
  display: flex;
  justify-content: space-between;
  padding-top: 24rpx;
}
.actions .amd-button {
  width: 47%;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Stepper",
  "usingComponents": {
    "stepper": "antd-mini/es/Stepper/index",
    "button": "antd-mini/es/Button/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}