微信小程序 stepper步进器自定义组件。代码简单，适合新手学习使用。

简单的组件，这种组件叫做步进器(steper)，步进器常用于购物车等需要增减数量的场景，最近的旅游项目中用于增减房间数和人数。

应用场景

组件的一些功能

从产品的角度来理解步进器很简单，但在开发角度来说需要适应多种场景及控制一些状态：
1、最小值
2、最大值
3、每次增加或者减少的值 例如：0.1就是每次增加或者减少0.1 ；默认为1
4、是否禁用
5、组件的索引值index。像购物车中，可能有好几个组件，需要区分所属哪个商品。所以需要用到。

自定义组件

创建components目录
在components目录新建tabs目录
在stepper目录新建四个文件
js json wxml wxss

自定义组件的index.js

Component({
     properties: {
          value: {
               type: Number,
               value: 1,
          },
          min: {
               type: Number,
               value: 1,
          },
          max: {
               type: Number,
               value: 10000,
          },
          step: {
               type: Number,
               value: 1
          },
          disabled: {
               type: Boolean,
               value: false
          },
          index: {
               type: Number,
               value: 0
          },
     },
     data: {
     },
     methods: {
     //通过step属性设置每次点击增加或减少按钮时变化的值，默认为1
          getScale() {
               let scale = 1;
               if (this.data.step != parseInt(this.data.step)) {
               //微信小程序的小数计算会出现偏差导致产生很长的无限循环的数，在这块处理一下。
                    scale = Math.pow(10, (this.data.step + '').split('.')[1].length)
               }
               return scale;
          },
          //输入操作处理
          blur: function (e) {
               let value = e.detail.value
               if (value) {
                    value = +value
                    if (value > this.data.max) {
                         value = this.data.max
                    } else if (value < this.data.min) {
                         value = this.data.min
                    }
               } else {
                    value = this.data.min
               }
               if (value != this.data.value) {
                    this.setData({
                         value: value
                    })
               }
               this.handleChange(value, "blur")
          },
          calcNum: function (type) {
               if (this.data.disabled) {
                    return
               }
               const scale = this.getScale()
               let num = this.data.value * scale
               let step = this.data.step * scale
               if (type === 'reduce') {
                    num -= step
               } else if (type === 'plus') {
                    num += step
               }
               let value = num / scale
               if (type === "plus" && value < this.data.min) {
                    value = this.data.min
               } else if (type === "reduce" && value > this.data.max) {
                    value = this.data.max
               }
               if (value < this.data.min || value > this.data.max) {
                    return
               }
               this.handleChange(value, type)
          },
          //增加按钮处理
          plus: function () {
               this.calcNum("plus")
          },
          //减少按钮处理
          reduce: function () {
               this.calcNum("reduce")
          },
          //事件绑定，返回值有三个，value:值 type:类型（输入，增加，减少） index（当前组件的索引）
          handleChange(value, type) {
               if (this.data.disabled) {
                    return
               }
               this.triggerEvent('change', {
                    value: value,
                    type: type,
                    index: this.data.index
               })
          }
     }
})

组件的index.wxml文件

<view class="cl-stepper" data-index="{{index}}">
     <view class="cl-stepper__minus  {{disabled || min>=value?'cl-stepper__minus--disabled':''}}" bindtap="reduce"></view>
     <input type="number" disabled="{{disabled}}" class="cl-stepper__input" bindblur="blur" value="{{value}}"></input>
     <view class="cl-stepper__plus {{disabled || value>=max?'cl-stepper__minus--disabled':''}}" bindtap="plus"></view>
</view>

组件的index.wxss文件

.cl-stepper {
	font-size: 0
}
.cl-stepper__minus,
.cl-stepper__plus {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	border: 0;
	background-color: #f7f8fa;
	color: #666;
	width: 42rpx;
	height: 42rpx;
	border-radius: 10rpx;
}

.cl-stepper__minus:before,
.cl-stepper__plus:before {
	width: 10px;
	height: 2px
}

.cl-stepper__minus:after,
.cl-stepper__plus:after {
	width: 2px;
	height: 10px
}

.cl-stepper__minus:after,
.cl-stepper__minus:before,
.cl-stepper__plus:after,
.cl-stepper__plus:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background-color: currentColor;
	content: ""
}
.cl-stepper__minus:active,
.cl-stepper__plus:active {
	background-color: #e5e5e5;
}
.cl-stepper__minus--disabled,
.cl-stepper__plus--disabled {
	color: #b2b2b2;
	background-color: #f7f8fa;
}

.cl-stepper__minus--disabled,
.cl-stepper__minus--disabled.cl-stepper__minus--hover,
.cl-stepper__minus--disabled.cl-stepper__plus--hover,
.cl-stepper__plus--disabled,
.cl-stepper__plus--disabled.cl-stepper__minus--hover,
.cl-stepper__plus--disabled.cl-stepper__plus--hover {
	background-color: #f7f8fa;
}

.cl-stepper__minus:after {
	display: none
}

.cl-stepper__input {
	display: inline-block;
	box-sizing: border-box;
	min-height: 0;
	margin: 1px;
	padding: 1px;
	text-align: center;
	vertical-align: middle;
	border: 0;
	border-width: 1px 0;
	border-radius: 0;
	-webkit-appearance: none;
	font-size: 14px;
	color: #333333;
	width: 32px;
	height: 28px;
}

.cl-stepper__input--disabled {
	color: #c8c9cc;
	background-color: #f2f3f5;
}

如何使用

在json文件中引入组件

在wxml中显示组件
bind:change为变化步进器的值绑定的事件
index是当前组件的索引。

js文件中

//绑定的change
change: function (e) {
	//e.detail.value 改变后的值
	//e.detail.type 操作的类型（输入，增加按钮，减少按钮）
	//e.detail.index 当前组件的索引
	//根据项目逻辑 自行处理
}

效果演示