Stepper 步进器

使用指南

Component({
  data: {
    value: 1,
  },

  onChange(event) {
    wx.showToast({
      icon: 'none',
      title: `当前值：${event.detail.value}`,
    });
  },

  onChange1(event) {
    setTimeout(() => {
      this.setData({
        value: event.detail.value,
      });
    }, 3000);
  },
});

<view class="container">
  <view>
    基础用法
    <tms-stepper value="{{ 2 }}" bind:on-change="onChange" />
  </view>
  <view>
    步长设置
    <tms-stepper value="{{ 1 }}" step="2" bind:on-change="onChange" />
  </view>
  <view>
    限制输入范围
    <tms-stepper value="{{ 5 }}" min="5" max="8" bind:on-change="onChange" />
  </view>
  <view>
    只能输入整数
    <tms-stepper value="{{ 1 }}" integer bind:on-change="onChange" />
  </view>

  <view>
    禁用状态
    <tms-stepper value="{{ 1 }}" disabled />
  </view>

  <view>
    固定小数位数
    <tms-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" bind:on-change="onChange" />
  </view>

  <view>
    自定义大小
    <tms-stepper
      value="{{ 1 }}"
      buttonSize="30px"
      input-width="40px"
      button-size="32px"
      bind:on-change="onChange"
    />
  </view>

  <view>
    异步变更
    <tms-stepper value="{{ value }}" async-change bind:on-change="onChange1" />
  </view>
</view>

属性

参数	说明	类型	可选值	默认值
name	在表单内提交时的标识符	String	—	—
value	输入值	Number	—	—
min	最小值	Number	—	1
max	最大值	Number	—	—
step	步长	Number	—	1
integer	是否只允许输入整数	Boolean	—	false
decimalLength	固定显示的小数位数	Number	—	—
inputWidth	输入框宽度，默认单位为 px	String, Number	—	72rpx
buttonSize	按钮大小，默认单位为 px，输入框高度会和按钮大小保持一致	String, Number	—	52rpx
inputFontSize	输入框字体大小	String, Number	—	30rpx
showPlus	是否显示增加按钮	Boolean	—	true
showMinus	是否显示减少按钮	Boolean	—	true
disabled	是否禁用	Boolean	—	false
disablePlus	是否禁用增加按钮	Boolean	—	false
disableMinus	是否禁用减少按钮	Boolean	—	false
asyncChange	是否开启异步变更，开启后需要手动控制输入值	Boolean	—	false
longPress	是否开启长按手势	Boolean	—	true

事件

事件名	说明	参数
bind:on-overlimit	点击不可用的按钮时触发	{type:'minus'}
bind:on-minus	点击减少按钮时触发	—
bind:on-plus	点击增加按钮时触发	—
bind:on-blur	输入框失焦时触发	输入框的值
bind:on-focus	输入框聚焦时触发	输入框的值
bind:on-change	当绑定值变化时触发的事件	输入框的值

CSS变量

// 计数器两侧按钮大小,加减号会相应改变大小
--stepper-btn-size: 52rpx;
// 计数器两侧按钮背景色
--stepper-background: #F4F6FA;
// 计数器两侧加减号颜色
--stepper-btn-color: #868C98;
// 计数器中间输入框文本颜色
--stepper-input-color: #333;
// 计数器输入框字体大小
--stepper-input-font-size: 30rpx;
// 计数器输入框宽度
--stepper-input-width: 72rpx;