UIPickerView

立即使用

open changeData close show hide getChecked setChecked

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述

UIPickerView 此模块封装了一个可以从屏幕底部向上弹出的 action 选择器(3D滚轮效果)。开发者可自定义选择器的样式,包括:导航条颜色、高度,导航条上左右按钮大小、位置、背景色、title,选择器内容区域的背景、高度、字体大小颜色等样式。同时本模块支持自定义是否显示遮罩层及其样式,可监听用户点击遮罩层、导航条左右按钮等事件, 并在监听的事件里自行设置显示/隐藏(show/hide)模块的操作,灵活,多样。

注意:模块自定义的数据源,可以直接传给模块。也可以制作成一个 json 文件,把 json 文件的路径传给模块。当为 json 文件时,必须时标准的 json 文件,否则在 iOS 端可能无法解析。 另外数据源的最外层上一个数组类型,数组有几个元素表示选择器有几列,且每列互相独立,非多级连动。每列宽度是当前屏幕宽度的平均分。数据源中的每项数据可自定义字段,其中 id 和 text 是必传项。其余可按需求自行添加,如下列表示两列的选择器的数据源:(android不支持)

  1. [[{
  2. 'id': '001',
  3. 'text':'刘德华',
  4. 'nickname':'123'
  5. },{
  6. 'id': '002',
  7. 'text':'章三' ,
  8. 'nickname':'123'
  9. },{
  10. 'id': '003',
  11. 'text':'李四',
  12. 'nickname':'123'
  13. },{
  14. 'id': '004',
  15. 'text':'王五',
  16. 'nickname':'123'
  17. },{
  18. 'id': '005',
  19. 'text':'赵六',
  20. 'nickname':'123'
  21. }],[{
  22. 'id': '001',
  23. 'text':'郭富城',
  24. 'nickname':'123'
  25. },{
  26. 'id': '002',
  27. 'text':'张',
  28. 'nickname':'123'
  29. },{
  30. 'id': '003',
  31. 'text':'王',
  32. 'nickname':'123'
  33. },{
  34. 'id': '004',
  35. 'text':'李',
  36. 'nickname':'123'
  37. },{
  38. 'id': '005',
  39. 'text':'李',
  40. 'nickname':'123'
  41. }]]

模块接口

open

打开选择器模块

open({params}, callback(ret))

params

styles:

  • 类型:JSON对象
  • 描述:(可选项)模块各部分的样式配置
  • 内部字段:
  1. {
  2. navigator: { //(可选项)JSON对象;导航条配置
  3. h: 44, //(可选性)数字类型;导航条高度;默认:44
  4. bg:'#969696', //(可选项)字符串类型;导航条背景色,支持rgb、rgba()、#、img;默认:#969696
  5. titleSize:13, //(可选性)数字类型;标题文本字体大小;默认:13
  6. titleColor:'#121212',//(可选项)字符串类型;标题文本颜色,支持rgb、rgba、#;默认:#121212
  7. title:'', //(可选项)字符串类型;标题文本;默认:空(不显示)
  8. },
  9. leftBtn: { //(可选项)JSON对象;导航条左边按钮配置
  10. w: 50, //(可选项)数字类型;按钮宽度;默认:50
  11. h: 34, //(可选项)数字类型;按钮高度;默认:34
  12. marginL:10, //(可选项)数字类型;按钮左边距;默认:10
  13. bg:'#969696', //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#969696
  14. textSize:13, //(可选性)数字类型;按钮文本字体大小;默认:12
  15. textColor:'#121212',//(可选项)字符串类型;按钮文本颜色,支持rgb、rgba、#;默认:#121212
  16. text:'' //(可选项)字符串类型;按钮标题文本;默认:取消
  17. },
  18. rightBtn: { //(可选项)JSON对象;导航条右边按钮配置
  19. w: 50, //(可选项)数字类型;按钮宽度;默认:50
  20. h: 34, //(可选项)数字类型;按钮高度;默认:34
  21. marginR:10, //(可选项)数字类型;按钮右边距;默认:10
  22. bg:'#969696', //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#969696
  23. textSize:13, //(可选性)数字类型;按钮标题文本字体大小;默认:12
  24. textColor:'#121212',//(可选项)字符串类型;按钮文本颜色,支持rgb、rgba、#;默认:#121212
  25. text:'' //(可选项)字符串类型;按钮标题文本;默认:确定
  26. },
  27. content: { //(可选项)JSON对象;选择器区域样式配置
  28. h: 34, //(可选项)数字类型;按钮高度;默认:34
  29. bg:'#969696', //(可选项)字符串类型;选择器背景色,支持rgb、rgba()、#、img;默认:#969696
  30. size:13, //(可选性)数字类型;滚轮显示文字大小;默认:12
  31. active:'#121212', //(可选项)字符串类型;滑到选中位置后的文本颜色,支持rgb、rgba、#;默认:#000000
  32. inactive:'#121212', //(可选项)字符串类型;滑到非选中位置后的文本颜色,支持rgb、rgba、#;默认:#8A8A8A
  33. divider: '#0D0D0D' // (可选项)字符串类型;分隔线的颜色,支持rgb、rgba、#;默认:#0D0D0D
  34. }
  35. }

mask:

  • 类型:字符串
  • 描述:(可选项)上部遮罩层配置,支持rgb、rgba、#;(仅ios支持)
  • 默认:不显示遮罩层

animation:

  • 类型:布尔
  • 描述:(可选项)打开/关闭(显示/隐藏)时是否带动画效果(300毫秒)
  • 默认:true

checked:

  • 类型:数组
  • 描述:默认当前选中数据的 ID 组成的数组,如:[‘001’,’001’,’001’,]
  • 默认:每列的第一个

datas:

  • 类型:数组/字符串
  • 描述:模块数据源,可以是 json 文件的路径,也可以把数据源直接传给模块
  • 内部字段:
  1. [[{
  2. id: '001', //字符串类型;选择器的一列中的一条数据的 ID 号
  3. text:'刘德华' //字符串类型;显示的单条数据
  4. },...],...]

cyclic:

  • 类型:布尔类型
  • 描述:(可选项)是否可循环滑动
  • 默认:true

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:回调参数
  • 内部字段:
  1. {
  2. evenType:'', //字符串类型,返回事件;取值范围 ‘show’/显示 ‘cancle’/取消 'submit'/确定选择
  3. selected:[], //JSON数组类型,当前被选择数据。仅evenType为submit时返回
  4. }

示例代码

  1. var UIPickerView = api.require('UIPickerView');
  2. UIPickerView.open({
  3. datas :{
  4. },
  5. styles:{
  6. }
  7. },function( ret ){
  8. api.alert( {msg:JSON.stringify( ret )});
  9. });

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

changeData

更改当前模块的数据源

changeData({params}, callback(ret))

params

datas:

  • 类型:数组/字符串
  • 描述:模块数据源,可以是 json 文件的路径,也可以把数据源直接传给模块
  • 内部字段:
  1. [[{
  2. id: '001', //字符串类型;选择器的一列中的一条数据的 ID 号
  3. text:'刘德华' //字符串类型;显示的单条数据
  4. },...],...]

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:回调参数
  • 内部字段:
  1. {
  2. status:true //布尔类型;是否改变成功
  3. }

示例代码

  1. var UIPickerView = api.require('UIPickerView');
  2. UIPickerView.changeData({
  3. datas:{
  4. }
  5. },function( ret ){
  6. api.alert( {msg:JSON.stringify( ret )});
  7. });

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

hide

隐藏模块

hide({params },callback(ret))

params

animation:

  • 类型:布尔
  • 描述:(可选项)是否带动画效果(300毫秒)
  • 默认:true

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:
  • 内部字段:
  1. {
  2. status: true //布尔类型;是否隐藏成功
  3. }

示例代码

  1. var UIPickerView = api.require('UIPickerView');
  2. UIPickerView.hide({
  3. animation:true
  4. });

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

show

显示已隐藏的模块

show({params },callback(ret))

params

animation:

  • 类型:布尔
  • 描述:(可选项)是否带动画效果(300毫秒)
  • 默认:true

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:
  • 内部字段:
  1. {
  2. status: true //布尔类型;是否显示成功
  3. }

示例代码

  1. var UIPickerView = api.require('UIPickerView');
  2. UIPickerView.show({
  3. animation:true
  4. });

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

close

关闭模块(从内存里清除)

close({params },callback(ret))

params

animation:

  • 类型:布尔
  • 描述:(可选项)是否带动画效果(300毫秒)
  • 默认:true

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:
  • 内部字段:
  1. {
  2. status: true //布尔类型;是否关闭成功
  3. }

示例代码

  1. var UIPickerView = api.require('UIPickerView');
  2. UIPickerView.close({
  3. animation:true
  4. });

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

getChecked

获取当前选中项的数据

getChecked(callback(ret))

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:
  • 内部字段:
  1. {
  2. checked:[] //数组类型;当前选中项的数据组成的数组,其数据同 open 接口内 datas传入的格式一致,如:[{'id':'001','text':'刘德华'},{'id':'001','text':'张学友'},{'id':'001','text':'郭富城'}]
  3. }

示例代码

  1. var UIPickerView = api.require('UIPickerView');
  2. UIPickerView.getChecked(function( ret ){
  3. api.alert( {msg:JSON.stringify( ret )});
  4. });

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

setChecked

设置选中项

setChecked({params}, callback(ret))

params

checked:

  • 类型:数组
  • 描述:设置选中项的 ID 组成的数组,如:[‘001’,’001’,’001’]

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:回调参数
  • 内部字段:
  1. {
  2. status:, //布尔类型;是否设置成功
  3. }

示例代码

  1. var UIPickerView = api.require('UIPickerView');
  2. UIPickerView.setChecked({
  3. checked:['001','001','001']
  4. },function( ret ){
  5. api.alert( {msg:JSON.stringify( ret )});
  6. });

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本