UIPickerView 模块示例demo

本文出自APICloud官方论坛

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

亮点：滚动流畅，自定义数据源，丰富的配置参数。

效果图：

open示例代码：

var UIPickerView = api.require('UIPickerView');

UIPickerView.open({

styles: {

navigator: { //（可选项）JSON对象；导航条配置

h: 44, //（可选性）数字类型；导航条高度；默认：44

bg: '#FFF', //（可选项）字符串类型；导航条背景色，支持rgb、rgba()、#、img；默认：#969696

titleSize: 20, //（可选性）数字类型；标题文本字体大小；默认：13

titleColor: '#EEB422', //（可选项)字符串类型；标题文本颜色，支持rgb、rgba、#；默认：#121212

title: '标题文字', //（可选项)字符串类型；标题文本；默认：空（不显示）

},

leftBtn: { //（可选项）JSON对象；导航条左边按钮配置

w: 44, //（可选项）数字类型；按钮宽度；默认：50

h: 44, //（可选项）数字类型；按钮高度；默认：34

marginL: 10, //（可选项）数字类型；按钮左边距；默认：10

bg: '#FFF', //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#969696

textSize: 18, //（可选性）数字类型；按钮文本字体大小；默认：12

textColor: '#EEB422', //（可选项)字符串类型；按钮文本颜色，支持rgb、rgba、#；默认：#121212

text: '取消' //（可选项)字符串类型；按钮标题文本；默认：取消

},

rightBtn: { //（可选项）JSON对象；导航条右边按钮配置

w: 44, //（可选项）数字类型；按钮宽度；默认：50

h: 44, //（可选项）数字类型；按钮高度；默认：34

marginR: 10, //（可选项）数字类型；按钮右边距；默认：10

bg: '#FFF', //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#969696

textSize: 18, //（可选性）数字类型；按钮标题文本字体大小；默认：12

textColor: '#EEB422', //（可选项)字符串类型；按钮文本颜色，支持rgb、rgba、#；默认：#121212

text: '确定' //（可选项)字符串类型；按钮标题文本；默认：确定

},

content: { //（可选项）JSON对象；选择器区域样式配置

h: 44, //（可选项）数字类型；按钮高度；默认：134

bg: '#FFF', //（可选项）字符串类型；选择器背景色，支持rgb、rgba()、#、img；默认：#969696

size: 18, //（可选性）数字类型；滚轮显示文字大小；默认：12

active: '#000', //（可选项)字符串类型；滑到选中位置后的文本颜色，支持rgb、rgba、#；默认：#000000

inactive: '#C5C1AA', //（可选项)字符串类型；滑到非选中位置后的文本颜色，支持rgb、rgba、#；默认：#8A8A8A

divider: '#EEEED1' // (可选项)字符串类型；分隔线的颜色，支持rgb、rgba、#；默认：#0D0D0D

}

},

mask: 'rgba(0,0,0,0.1)', //'rgba(0,0,0,0.2)',  //仅支持ios

animation: true,

checked: ['004', '003', '001'],

datas: [

[{

'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': '刘-90',

'nickname': '123'

}, {

'id': '002',

'text': '张-30',

'nickname': '123'

}, {

'id': '003',

'text': '王李-60',

'nickname': '123'

}, {

'id': '004',

'text': '王-00',

'nickname': '123'

}, {

'id': '005',

'text': '赵-80',

'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'

}]

],

cyclic: true

}, function(ret) {

api.alert({

msg: "打开选择器模块：" + JSON.stringify(ret)

});

});

复制代码