UIPickerView

open changeData close show hide getChecked setChecked

论坛示例

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

概述

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 及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24