本文出自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)
});
});
複製代碼