一、说明

picker 是 weex 的内置组件,主要用来实现时间和日期的选择,以及其他一些简单数据的选择框。

官方文档地址:

picker 在 H5 上是不支持的,如果要支持,需要引入 weex-project/weex-picker,但是它的引入和使用有我发现 但是没有解决的问题,在最后提出。

模块的引入方式:

const picker = weex.requireModule('picker');

有三个方法:

  • picker.pick()
  • picker.pickDate()
  • picker.pickTime()

二、picker.pick()

这是最简单的使用方式,方法调用 pick(options, callback[options])

其中 options 支持如下的属性:

  • index {number}:默认选中的选项
  • items {array}:picker 数据源
  • textColor {color}:picker中文字的颜色
  • selectionColor {color}:picker中选中item的背景色
  • confirmTitle {string}:确认按钮的文案
  • cancelTitle {string}:取消按钮的文案
  • confirmTitleColor {color}:确认按钮的文字颜色
  • cancelTitleColor {color}:取消按钮的文字颜色
  • title {string}:对话框的标题
  • titleColor {color}:对话框标题的文字颜色
  • itleBackgroundColor {color}:对话框标题的背景色

callback 有一个参数是 retret 主要的属性如下:

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

一般 callback 结构如下:

function callback(ret) {
    if(ret.result === 'success') _this.data = ret.data;
}

在线示例(使用 weex playground 扫描二维码查看):

效果:

2.jpg

三、pickDate(options, callback[options])

选择日期,其中 options 有如下属性:

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

callback 的参数 ret,其中 ret.result 是一样的,但是 ret.data 类型是 string,返回格式为 yyyy-mm-dd 格式的日期字符串(只有 ret.result === 'success' 才存在)。

在线示例(使用 weex playground 扫描二维码查看):

效果:

3.jpg

四、pickTime(options, callback[options])

选择时间,其中 options 有如下属性:

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

而 callback 的参数 ret 中,ret.result 和上面两个一样,但是 ret.data 返回的是格式为 HH:mm 的时间。

在线示例:

效果:

4.jpg

五、在 H5 使用的问题

picker 模块默认是不能在 H5 中使用的,所以上面的示例只能使用 playground 扫描打开。

如果要在 H5 中使用,需要引入额外的模块:@weex-project/weex-picker

模块的地址:

通过 npm 安装:

yarn add @weex-project/weex-picker
# npm install @weex-project/weex-picker


很不解的一点是,官方给的文档中,引入 weex-picker 的方式,竟然是通过 <script src="../../../node_modules/@weex-project/weex-picker/js/build/index.js"></script> 这种方式引入

(可以在这个包的weex-picker/js/build/index.js找到源代码)

而我尝试了使用 import 的方式引入,比如:(一定要在 requireModule('picker')之前)

import '../../node_modules/@weex-project/weex-picker/js/build/index.js';
const picker = weex.requireModule('picker');

其他代码没什么变化,发现在 web 端能够正常运行,效果如下:

11.jpg

22.jpg

33.jpg

但是,当使用 weex 的 playground 扫描二维码之后,页面会报错,报错内容我提了一个 issue,不确定是否是我使用方式的错误还是本身的 bug 问题。

issue 地址: