Picker选择器

引入

{
  "usingComponents": {
    "x-picker": "waft-ui/assembly/picker/picker"
  }
}

代码示例

  <x-picker
    show="{{ showPicker }}"
    pickerData="{{ pickerData }}"
    change="handleChange"
    clickConfirm="clickConfirm"
    clickCancel="clickCancel"
  ></x-picker>

效果展示

组件样式

html

<view class="wrapper">
  <x-nav-bar showArrow="{{true}}" title="测试Picker"></x-nav-bar>
  <view style="height: 30rpx"></view>
  <x-picker
    show="{{ showPicker }}"
    pickerData="{{ pickerData }}"
    onChange="handleChange"
    onConfirm="onConfirm"
    onCancel="onCancel"
  ></x-picker>
  <x-button text="显示通用选择器" onTap="clickPickerButton" type="primary"></x-button>
</view>

css

.wrapper {
  background-color:#eeeeee;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

json

{
    "usingComponents": {
    "x-nav-bar": "../assembly/nav-bar/nav-bar",
    "x-picker": "../assembly/picker/picker",
    "x-button":"../assembly/button/button",
  },
  "state":{
    "showPicker": false,
    // 多列选择器
    "pickerData": [
      {
        "options":["选项a","选项b","选项c","选项d"],
        "index":0
      },
      {
          "options":["选项e","选项f","选项g","选项h"],
            "index":0
        }
    ]
  }

}

ts

import { Event, Page, Props, console } from "waft";
import { JSON, JSONObject } from "waft-json";

export class TestPicker extends Page {
  constructor(props: Props) {
    super(props);
  }

  onConfirm(e: Event): void{
    console.log("===test-picker的onConfirm事件===");
    console.log(e.toString());
    this.setState(
      JSON.parseObject(`{"showPicker":false}`)
    );
    this.setState(
      JSON.parseObject(`{"showTimePicker":false}`)
    );
  }

  onCancel(e: Event): void{
    console.log("===test-picker的onCancel事件===");
    console.log(e.toString());
    this.setState(
      JSON.parseObject(`{"showPicker":false}`)
    );
    this.setState(
      JSON.parseObject(`{"showTimePicker":false}`)
    );
  }

  handleChange(e: Event): void{
    console.log("===test-picker的handleChange事件===");
    console.log(e.toString());
  }

  clickTimeButton(e: Event): void{
    this.setState(
      JSON.parseObject(`{"showTimePicker":true}`)
    );
  }

  clickPickerButton(e: Event):void{
    this.setState(
      JSON.parseObject(`{"showPicker":true}`)
    );
  }
}

API

• props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | show | 是否显示选择器 | | | | title | 选择器标题 | | | | pickerData | 选择器数据 | | |

• Event | 事件名 | 说明 | 返回值 | | —- | —- | —- | | clickConfirm | 点击确定按钮触发 | 当前选中数据 | | clickCancel | 点击取消按钮触发 | 当前选中数据 | | change | 数据发生改变时触发 | 发生改变的列选中的数据 |