weex-22-picker模块

本节学习目标

• picker 组件能制作什么效果
• 三种picker组件API的用法
• picker的限制

我们就围绕上面的三点认识这个组件

0705E0AA-369A-458F-B24F-73FB2CE6B502.png

picker 组件能制作什么效果

先看几个效果图

1.单项选择

9D7EA7B8-7DAD-43E5-9B44-E527FBD7641E.png

2.时间选择

FFEF1F28-5E98-4B11-8C93-43A58E3BB1A3.png

3.日期选择

231037AE-9644-4B8D-83F0-4355B2C7435D.png

目前这个组件只能实现以上三种效果,下面我们看看三种效果怎么实现

三种picker组件API的用法

• 第一步 通用
  导入picker组件

const picker = weex.requireModule('picker')

• 第二步 调用以上样式的对应的API

  单选

        picker.pick({index:this.cityIndex, // 选择值的索引items:this.cities  // 选项数组},res=>{if(res.result=="success"){this.cityIndex = res.data}else if(res.result=="cancel"){// 当用户单击取消按钮}else if (res.result=='error'){// 当选择出错时   }})

下面是原型

pick(options, callback[options])
参数

options {Object}

index:默认选中的选项
items {array} 数据源数组

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

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

时间选择

picker.pickTime({value:this.time},res=>{if(res.result=="success"){this.time = res.data}else if(res.result=="cancel"){}else if (res.result=='error'){}})

解释

value 默认选中的值 格式必须是HH:mm(如12:03)
res是用户单击确定或者取消按钮后的回调函数的参数
res.data 只有当用户单击确定按钮后,这个值才不为空,处理时要进行逻辑判断
res.result 的值有success,cancel,error 三种,当用户单击取消按钮这个值为cancel,当用户选择确定按钮,这个值为success,如果选择过程中发生错误,则为error

日期选择

picker.pickDate({value:this.date,min:'2015-01-01',max:'2017-12-22'},res=>{if(res.result=="success"){this.date = res.data}else if(res.result=="cancel"){}else if (res.result=='error'){}})

解释

1.value 设置默认选择的值格式为yyyy-MM-dd (如:2017-07-07)
2.min 能选择的最小的值,max 能选择的最大的值
3.res.data 选择后回调函数的参数的值,例如(2015-02-12)
4.其他参数上面已经讲解过了,这里就不赘述了

picker的限制

picker 目前不支持H5,对于这种情况,我们可以自定义组件