简单的组件,这种组件叫做步进器(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 当前组件的索引
//根据项目逻辑 自行处理
}