UIPickerView

open close hide setChecked

论坛示例

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

概述

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

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

模块接口

打开选择器模块

open({params}, callback(ret))

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.       textColor:'#121212',//（可选项)字符串类型；按钮文本颜色，支持rgb、rgba、#；默认：#121212
  24.       text:''             //（可选项)字符串类型；按钮标题文本；默认：确定 
  25.    },  
  26.    content: {              //（可选项）JSON对象；选择器区域样式配置 
  27.       h: 34,               //（可选项）数字类型；按钮高度；默认：34 
  28.       bg:'#969696',        //（可选项）字符串类型；选择器背景色，支持rgb、rgba()、#、img；默认：#969696
  29.       size:13,             //（可选性）数字类型；滚轮显示文字大小；默认：12
  30.       active:'#121212',    //（可选项)字符串类型；滑到选中位置后的文本颜色，支持rgb、rgba、#；默认：#000000 
  32.        divider: '#0D0D0D'  // (可选项)字符串类型；分隔线的颜色，支持rgb、rgba、#；默认：#0D0D0D 
  33.    }
  34. }

mask:

  • 类型：字符串
  • 描述：（可选项）上部遮罩层配置，支持rgb、rgba、#；（仅ios支持）
  • 默认：不显示遮罩层

animation:

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

checked:

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

datas:

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

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

更改当前模块的数据源

params

datas:

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

callback(ret)

ret：

  • 类型：JSON对象
  • 描述：回调参数
  • 内部字段：

示例代码

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

可用性

iOS，android 系统

可提供的 1.0.0 及更高版本

隐藏模块

hide({params },callback(ret))

params

animation:

  • 类型：布尔
  • 描述：（可选项）是否带动画效果（300毫秒）
  • 默认：true

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({params },callback(ret))

params

animation:

  • 类型：布尔
  • 描述：（可选项）是否带动画效果（300毫秒）
  • 默认：true

callback(ret)

ret：

  • 类型：JSON对象
  • 描述：
  • 内部字段：
  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({params}, callback(ret))

params

checked:

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

callback(ret)

ret：

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

示例代码

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

可用性

iOS，android 系统

可提供的 1.0.0 及更高版本