Stepper 计数器

使用指南

在 index.json 中引入组件

  1. {
  2.   "usingComponents": {
  3.     "zan-stepper": "path/to/zanui-weapp/dist/stepper/index"
  4.   }
  5. }

代码演示

基础用法

Stepper 组件通过传入的 stepper 对象控制，内部数据格式如下：

  1. Page({
  2.   data: {
  3.     stepper: {
  4.       // 当前 stepper 数字
  5.       stepper: 1,
  6.       // 最小可到的数字
  7.       min: 1,
  8.       // 最大可到的数字
  9.       max: 1,
  10.       // 小尺寸, 默认大尺寸
  11.       size: 'small'
  12.     }
  13.   },
  15.   handleZanStepperChange({
  16.     // stepper 代表操作后，应该要展示的数字，需要设置到数据对象里，才会更新页面展示
  17.     detail: stepper
  18.   }) {
  19.     this.setData({
  20.       'stepper.stepper': stepper
  21.     });
  22.   }
  23. });

当一个 Stepper 中，min 超过 max，就会导致组件被置灰。

当 stepper 被点击时，需要监听change事件，处理计数器值的改变。

  1. <zan-stepper
  2.   stepper="{{ stepper.stepper }}"
  3.   min="{{ stepper.min }}"
  4.   max="{{ stepper.max }}"
  5.   bind:change="handleZanStepperChange"
  6. >
  7. </zan-stepper>

API

参数 说明 类型 默认值 必须
size 计数器尺寸 String -
stepper 计数器的值 Number 1 必须
min 计数器最小值 Number 1
max 计数器最大值 Number 无穷大
step 步数 Number 1

Event

事件名称 说明 回调参数
change 当绑定值变化时触发的事件 { index, stepper }
minus 点击减少按钮时触发 -
plus 点击增加按钮时触发 -

Stepper 计数器 - 图1
微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/form/stepper