fs-weapp/stepper

Stepper 步进器

使用指南

在 app.json 或 index.json 中引入stepper组件

{
  "usingComponents": {
    "fs-button": "path/components/stepper/index"
  }
}
1
2
3
4
5

代码演示

  • 基本使用
<fs-stepper value="3"/>
1
  • 禁用状态
<fs-stepper value="2" bind:overlimit="handleEvent" disabled/>
1
  • 异步变更
<fs-stepper
  value="{{value}}"
  integer
  async-change
  bind:minus="handleEvent"
  bind:plus="handleEvent"
  bind:blur="handleEvent"
  bind:focus="handleEvent"
  bind:change="onChange"/>
1
2
3
4
5
6
7
8
9
Page({
  data: {
    value: 4
  },
  onChange (e) {
    this.setData({
      value: e.detail
    })
  },
  handleEvent (e) {
    console.log(e)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
  • 禁止输入
<fs-stepper value="3" disableInput/>
1
  • 高级用法
<fs-stepper
  value="6"
  integer
  min="5"
  max="40"
  step="2"/>
1
2
3
4
5
6

属性

参数 说明 类型 默认值
value 绑定的值 Numer -
step 步进值 String, Numer 1
min 最小值 String, Numer 1
max 最大值 String, Numer 2147483647
disabled 是否disable Boolen -
disableInput 禁止手动输入 Boolen -
asyncChange 异步手动更新数据 Boolen -
integer 是否整型 Boolen -
custom-class 根节点样式名 String -
input-class 输入框样式类 String -
minus-class 减号按钮样式类 String -
plus-class 加号按钮样式类 String -

事件

event 说明 返回值
overlimit 点击不可用的按钮时触发 -
change 绑定值改变时触发 -
minus 点击减少按钮时触发 -
plus 点击增加按钮时触发 -
blur 输入框失焦时触发 -
focus 输入框聚焦时触发 -

← Loading 加载 →