picker

v0.9+

概述

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