64 lines
1.2 KiB
Markdown
64 lines
1.2 KiB
Markdown
|
# Custom Stepper 自定义步进器组件
|
|||
|
|
|
|||
|
|
## 介绍
|
|||
|
|
自定义步进器组件，类似于Vant Weapp的van-stepper，包含两个按钮和一个输入框，可用于在设定的范围内增加或减少数值。
|
|||
|
|
|
|||
|
|
## 使用示例
|
|||
|
|
|
|||
|
|
在页面的JSON配置文件中注册组件：
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"usingComponents": {
|
|||
|
|
"custom-stepper": "/components/custom-stepper/index"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
在WXML中使用组件：
|
|||
|
|
```xml
|
|||
|
|
<custom-stepper
|
|||
|
|
value="{{ value }}"
|
|||
|
|
min="0"
|
|||
|
|
max="100"
|
|||
|
|
step="1"
|
|||
|
|
disabled="{{ false }}"
|
|||
|
|
bindchange="onChange" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
在页面JS中处理事件：
|
|||
|
|
```javascript
|
|||
|
|
Page({
|
|||
|
|
data: {
|
|||
|
|
value: 0
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onChange(e) {
|
|||
|
|
this.setData({
|
|||
|
|
value: e.detail.value
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 属性说明
|
|||
|
|
|
|||
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|||
|
|
|-------|------|-------|------|
|
|||
|
|
| value | Number | 0 | 当前值 |
|
|||
|
|
| min | Number | 0 | 最小值 |
|
|||
|
|
| max | Number | 100 | 最大值 |
|
|||
|
|
| step | Number | 1 | 步长 |
|
|||
|
|
| disabled | Boolean | false | 是否禁用 |
|
|||
|
|
|
|||
|
|
## 事件说明
|
|||
|
|
|
|||
|
|
| 事件名 | 说明 | 返回值 |
|
|||
|
|
|-------|------|-------|
|
|||
|
|
| bindchange | 当值发生变化时触发 | { value: Number } |
|
|||
|
|
|
|||
|
|
## 更新日志
|
|||
|
|
|
|||
|
|
### 1.0.0
|
|||
|
|
- 初始版本发布
|
|||
|
|
- 实现基本的步进功能
|
|||
|
|
- 支持设置范围、步长和禁用状态
|