UIPickerView

立即使用

论坛示例

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

概述

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

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

[[{
    'id': '001',         
    'text':'刘德华',
    'nickname':'123'       
},{
    'id': '002',         
    'text':'章三' ,
    'nickname':'123'       
},{
    'id': '003',         
    'text':'李四',
    'nickname':'123'        
},{
    'id': '004',         
    'text':'王五',
    'nickname':'123'        
},{
    'id': '005',        
    'text':'赵六',
    'nickname':'123'        
}],[{
    'id': '001',         
    'text':'郭富城',
    'nickname':'123'        
},{
    'id': '002',         
    'text':'张',
    'nickname':'123'        
},{
    'id': '003',         
    'text':'王',
    'nickname':'123'        
},{
    'id': '004',         
    'text':'李',
    'nickname':'123'       
},{
    'id': '005',
    'text':'李',
    'nickname':'123' 
}]]

模块接口

open

打开选择器模块

open({params}, callback(ret))

params

styles:

  • 类型:JSON对象
  • 描述:(可选项)模块各部分的样式配置
  • 内部字段:
{
   navigator: {             //(可选项)JSON对象;导航条配置
      h: 44,                //(可选性)数字类型;导航条高度;默认:44
      bg:'#969696',         //(可选项)字符串类型;导航条背景色,支持rgb、rgba()、#、img;默认:#969696
      titleSize:13,        //(可选性)数字类型;标题文本字体大小;默认:13
      titleColor:'#121212',//(可选项)字符串类型;标题文本颜色,支持rgb、rgba、#;默认:#121212
      title:'',            //(可选项)字符串类型;标题文本;默认:空(不显示) 
   }, 
   leftBtn: {              //(可选项)JSON对象;导航条左边按钮配置
      w: 50,               //(可选项)数字类型;按钮宽度;默认:50
      h: 34,               //(可选项)数字类型;按钮高度;默认:34
      marginL:10,          //(可选项)数字类型;按钮左边距;默认:10
      bg:'#969696',        //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#969696
      textSize:13,        //(可选性)数字类型;按钮文本字体大小;默认:12
      textColor:'#121212',//(可选项)字符串类型;按钮文本颜色,支持rgb、rgba、#;默认:#121212
      text:''             //(可选项)字符串类型;按钮标题文本;默认:取消 
   }, 
   rightBtn: {             //(可选项)JSON对象;导航条右边按钮配置
      w: 50,               //(可选项)数字类型;按钮宽度;默认:50
      h: 34,               //(可选项)数字类型;按钮高度;默认:34
      marginR:10,          //(可选项)数字类型;按钮右边距;默认:10
      bg:'#969696',        //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#969696
      textSize:13,        //(可选性)数字类型;按钮标题文本字体大小;默认:12
      textColor:'#121212',//(可选项)字符串类型;按钮文本颜色,支持rgb、rgba、#;默认:#121212
      text:''             //(可选项)字符串类型;按钮标题文本;默认:确定 
   },  
   content: {              //(可选项)JSON对象;选择器区域样式配置 
      h: 34,               //(可选项)数字类型;按钮高度;默认:34 
      bg:'#969696',        //(可选项)字符串类型;选择器背景色,支持rgb、rgba()、#、img;默认:#969696
      size:13,             //(可选性)数字类型;滚轮显示文字大小;默认:12
      active:'#121212',    //(可选项)字符串类型;滑到选中位置后的文本颜色,支持rgb、rgba、#;默认:#000000 
      inactive:'#121212',  //(可选项)字符串类型;滑到非选中位置后的文本颜色,支持rgb、rgba、#;默认:#8A8A8A 
       divider: '#0D0D0D'  // (可选项)字符串类型;分隔线的颜色,支持rgb、rgba、#;默认:#0D0D0D 
   }
}

mask:

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

animation:

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

checked:

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

datas:

  • 类型:数组/字符串
  • 描述:模块数据源,可以是 json 文件的路径,也可以把数据源直接传给模块
  • 内部字段:

[[{
    id: '001',         //字符串类型;选择器的一列中的一条数据的 ID 号
    text:'刘德华'       //字符串类型;显示的单条数据
},...],...]

cyclic:

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

callback(ret)

ret:

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

示例代码

var UIPickerView = api.require('UIPickerView');
UIPickerView.open({
    datas :{
          },
    styles:{     
           }
},function( ret ){
    api.alert( {msg:JSON.stringify( ret )});
});

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

changeData

更改当前模块的数据源

changeData({params}, callback(ret))

params

datas:

  • 类型:数组/字符串
  • 描述:模块数据源,可以是 json 文件的路径,也可以把数据源直接传给模块
  • 内部字段:

[[{
    id: '001',         //字符串类型;选择器的一列中的一条数据的 ID 号
    text:'刘德华'       //字符串类型;显示的单条数据
},...],...]

callback(ret)

ret:

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

示例代码

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

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

hide

隐藏模块

hide({params },callback(ret))

params

animation:

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

callback(ret)

ret:

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

示例代码

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

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

show

显示已隐藏的模块

show({params },callback(ret))

params

animation:

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

callback(ret)

ret:

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

示例代码

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

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

close

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

close({params },callback(ret))

params

animation:

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

callback(ret)

ret:

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

示例代码

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

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

getChecked

获取当前选中项的数据

getChecked(callback(ret))

callback(ret)

ret:

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

示例代码

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

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

setChecked

设置选中项

setChecked({params}, callback(ret))

params

checked:

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

callback(ret)

ret:

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

       status:,  //布尔类型;是否设置成功  
}

示例代码

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

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本