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