Stepper

2021-07-06 11:36

Increase or decrease the current value.

Note:
• No prompt for input of maximum. If it exceeds the maximum, the system automatically displays the value as the maximum.
• Input of decimal is not supported. It is possible to use + and - to change value.

Sample Code

copy

	// 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"
	  }
	}

copy

	<!-- 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">Modify stepper initial value</button>
	  </list-item>
	</list>

copy

	// API-DEMO page/component/stepper/stepper.js
	Page({
	  data: {
	    value: 8,
	  },
	  callBackFn(value){
	   console.log(value);
	  },
	  modifyValue() {
	    this.setData({
	      value: this.data.value + 1,
	    });
	  }
	});

Attributes

Property	Description	Type	Default	Required
min	Minimum.	Number	0	Yes
max	Maximum.	Number	10000	Yes
value	Initial value.	Number	10	Yes
step	Change step, can be a decimal.	Number	1	No
onChange	Change callback function.	(value: Number) => void	-	No
disabled	Disabled.	Boolean	false	No
readOnly	Input read-only.	Boolean	false	No
showNumber	Show number or not, not shown by default.	Boolean	false	No