This article comes from APICloud official forum
This module encapsulates a UIPickerView can pop up from the bottom of the screen action selector (3D roller effect). The developer may customize the style selector, comprising: a navigation bar color, height, background on the left and right navigation buttons size, the position, background color, title, selection of contents area, height, font size, color and other styles. At the same time this module supports custom style and whether to display the mask layer, the mask layer can listen for clicks, left and right navigation buttons and other events, and monitor events in their own setting display / hide the operation (show / hide) module, flexible and diverse.
Highlights: smooth scrolling, custom data source, rich configuration parameters.
Renderings:
open sample code:
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)
});
});
复制代码