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)
                        });
                });
復制代碼