picker

picker v0.9+

Updated time: 22/06/2017

概述

以下为 picker 相关的 API，用于数据选择，日期选择，时间选择。（ H5模块如需使用，请手动引入weex-picker组件）

API

pick(options, callback[options])
调用单选 picker

参数

  • options {Object}：调用单选 picker 选项

    • index {number}：默认选中的选项
    • items {array}：picker 数据源

  • callback {function (ret)}：执行完读取操作后的回调函数。ret {Object} 为 callback 函数的参数，有两个属性：

    • result {string}：结果三种类型 success, cancel, error
    • data {number}：选择的选项,仅成功确认时候存在。

pickDate(options, callback[options])
调用 date picker

参数

  • options {Object}：调用 date picker 选项

    • value {string}：必选，date picker 选中的值，date 的字符串格式为yyyy-MM-dd
    • max {string}：可选，date 的最大值
    • min {string}：可选，date 的最小值

  • callback {function (ret)}：执行完读取操作后的回调函数。ret {Object} 为 callback 函数的参数，有两个属性：

    • result {string}：结果三种类型 success, cancel, error
    • data {string}：选择的值 date 的字符，格式为 yyyy-MM-dd, 仅成功确认的时候存在。

pickTime(options, callback[options])
调用 time picker

参数

  • options {Object}：调用 time picker 选项

    • value {string}：必选，time 格式为 HH:mm

  • callback {function (ret)}：执行完读取操作后的回调函数。ret {Object} 为 callback 函数的参数，有两个属性：

    • result {string}：结果三种类型 success, cancel, error
    • data {string}：time 格式为 HH:mm, 仅成功确认的时候存在。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<template>
  <div class="wrapper">
    <div class="group">
      <text class="label">Time: </text>
      <text class="title">{{value}}</text>
    </div>
    <div class="group">
      <text class="button" @click="pickTime">Pick Time</text>
    </div>
  </div>
</template>
<script>
  const picker = weex.requireModule('picker')
  export default {
    data () {
      return {
        value: ''
      }
    },
    methods: {
      pickTime () {
        picker.pickTime({
          value: this.value
        }, event => {
          if (event.result === 'success') {
            this.value = event.data
          }
        })
      }
    }
  }
</script>
<style scoped>
  .wrapper {
    flex-direction: column;
    justify-content: center;
  }
  .group {
    flex-direction: row;
    justify-content: center;
    margin-bottom: 40px;
    align-items: center;
  }
  .label {
    font-size: 40px;
    color: #888888;
  }
  .title {
    font-size: 80px;
    color: #41B883;
  }
  .button {
    font-size: 36px;
    width: 280px;
    color: #41B883;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
</style>