全部产品

步进器(Stepper)

更新时间:2019-09-09 14:07:22

步进器(Stepper)用作增加或者减少当前数值。

属性名 描述 类型 默认值 必选
min 最小值 Number 0 true
max 最大值 Number 10000 true
value 初始值 Number 10 true
step 每次改变步数,可以为小数 Number 1 false
onChange 变化时回调函数 (value: Number) => void - false
disabled 禁用 Boolean false false
readOnly input 只读 Boolean false false
showNumber 是否显示数值,默认不显示 Boolean false false

代码示例

  1. {
  2. "defaultTitle": "Stepper",
  3. "usingComponents":{
  4. "stepper": "mini-antui/es/stepper/index",
  5. "list": "mini-antui/es/list/index",
  6. "list-item": "mini-antui/es/list/list-item/index"
  7. }
  8. }
  1. <list>
  2. <list-item disabled="{{true}}">
  3. Show number value
  4. <view slot="extra">
  5. <stepper onChange="callBackFn" step="{{1}}" showNumber readOnly="{{false}}" value="{{value}}" min="{{2}}" max="{{12}}" />
  6. </view>
  7. </list-item>
  8. <list-item disabled="{{true}}">
  9. Do not show number value
  10. <view slot="extra">
  11. <stepper onChange="callBackFn" step="{{1}}" readOnly="{{false}}" value="{{value}}" min="{{2}}" max="{{12}}" />
  12. </view>
  13. </list-item>
  14. <list-item disabled="{{true}}">
  15. Disabled
  16. <view slot="extra">
  17. <stepper onChange="callBackFn" showNumber value="{{11}}" min="{{2}}" max="{{12}}" disabled />
  18. </view>
  19. </list-item>
  20. <list-item disabled="{{true}}">
  21. readOnly
  22. <view slot="extra">
  23. <stepper onChange="callBackFn" showNumber value="{{11}}" min="{{2}}" max="{{12}}" readOnly />
  24. </view>
  25. </list-item>
  26. <list-item>
  27. <button onTap="modifyValue">修改stepper初始值</button>
  28. </list-item>
  29. </list>
  1. Page({
  2. data: {
  3. value: 8,
  4. },
  5. callBackFn(value){
  6. console.log(value);
  7. },
  8. modifyValue() {
  9. this.setData({
  10. value: this.data.value + 1,
  11. });
  12. }
  13. });