Picker选择器

引入

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

代码示例

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

组件演示

axml

<view class="wrapper">
  <x-nav-bar showArrow="{{true}}" title="测试Picker"></x-nav-bar>
  <!-- <x-header tip1="天猫精灵，打开勿扰模式" tip2="天猫精灵，关闭勿扰模式"></x-header> -->
  <view style="height: 30rpx"></view>
  <x-picker
    show="{{ showPicker }}"
    pickerData="{{ pickerData }}"
    change="handleChange"
    clickConfirm="clickConfirm"
    clickCancel="clickCancel"
  ></x-picker>
  <x-button text="显示通用选择器" click="clickPickerButton" type="primary"></x-button>
  <x-button text="显示时间选择器" click="clickTimeButton" type="secondary"></x-button>
  <x-button type="tip" text="天猫精灵，打开勿扰模式"></x-button>
  <x-image src="https://gw.alicdn.com/imgextra/i1/O1CN01Ol1xXi1zuXeMTVRjD_!!6000000006774-2-tps-305-305.png"></x-image>
  <x-time-picker
    show="{{ showTimePicker }}"
    clickConfirm="clickConfirm"
    clickCancel="clickCancel"
    change="handleChange"
  ></x-time-picker>
  <!-- <x-footer tip1="天猫精灵，回到顶部" tip2="天猫精灵，播放我的收藏" tip3="天猫精灵，打开最火综艺"></x-footer> -->
</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-card": "../assembly/card/card",
    "x-picker": "../assembly/picker/picker",
    "x-time-picker": "../assembly/time-picker/time-picker",
    "x-button":"../assembly/button/button",
    "x-header":"../assembly/header/header",
    "x-footer":"../assembly/footer/footer",
    "x-image":"../assembly/image/image"
  },
  "state":{
    "showPicker": false,
    // 多列选择器
    "pickerData": [
      {
        "options": ["选项1", "选项2", "选项3", "选项4", "选项5", "选项6"],
        "index": 0
      },
      {
        "options": ["选项1", "选项2", "选项3"],
        "index": 0
      }
    ],
    // 单列选择器
    "pickerData": [
      {
        "options": ["选项1", "选项2", "选项3", "选项4", "选项5", "选项6"],
        "index": 0
      }
    ],
    // 级联选择器（目前只支持两级）
    "pickerData": {
      "选项1":{
        "options":["选项a","选项b","选项c","选项d"],
        "index":0
      },
      "选项2":{
          "options":["选项e","选项f","选项g","选项h"],
            "index":0
        }
    }
  }

}

ts

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

export class TestPicker extends Page {
  constructor(props: Props) {
    super(props);
    this.addEventListener("clickConfirm",(event,target) => {
      console.log("===test-picker的clickConfirm事件===")
      console.log(event.toString());
      (target as TestPicker).setState(
        JSON.parseObject(`{"showPicker":false}`)
      );
      (target as TestPicker).setState(
        JSON.parseObject(`{"showTimePicker":false}`)
      );
    })
    this.addEventListener("clickCancel",(event,target) => {
      console.log("===test-picker的clickCancel事件===")
      console.log(event.toString());
      (target as TestPicker).setState(
        JSON.parseObject(`{"showPicker":false}`)
      );
      (target as TestPicker).setState(
        JSON.parseObject(`{"showTimePicker":false}`)
      );
    })
    this.addEventListener("handleChange",(event,target) => {
      console.log("===test-picker的handleChange事件===")
      console.log(event.toString());
    })
    this.addEventListener("clickTimeButton", (e, target): void => {
      (target as TestPicker).setState(
        JSON.parseObject(`{"showTimePicker":true}`)
      );
    });
    this.addEventListener("clickPickerButton", (e, target): void => {
      (target as TestPicker).setState(
        JSON.parseObject(`{"showPicker":true}`)
      );
    });
  }
}

API

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

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