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>
  13. <script>
  14.   const picker = weex.requireModule('picker')
  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>
  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>