UIPickerView 模塊示例demo

本文出自APICloud官方論壇

UIPickerView 此模塊封裝了一個(gè)可以從屏幕底部向上彈出的 action 選擇器（3D滾輪效果）。開發(fā)者可自定義選擇器的樣式，包括：導(dǎo)航條顏色、高度，導(dǎo)航條上左右按鈕大小、位置、背景色、title，選擇器內(nèi)容區(qū)域的背景、高度、字體大小顏色等樣式。同時(shí)本模塊支持自定義是否顯示遮罩層及其樣式，可監(jiān)聽用戶點(diǎn)擊遮罩層、導(dǎo)航條左右按鈕等事件， 并在監(jiān)聽的事件里自行設(shè)置顯示/隱藏（show/hide）模塊的操作，靈活，多樣。

亮點(diǎn)：滾動(dòng)流暢，自定義數(shù)據(jù)源，豐富的配置參數(shù)。

效果圖：

open示例代碼：

var UIPickerView = api.require('UIPickerView');
                UIPickerView.open({
                        styles: {
                                navigator: { //（可選項(xiàng)）JSON對(duì)象；導(dǎo)航條配置
                                        h: 44, //（可選性）數(shù)字類型；導(dǎo)航條高度；默認(rèn)：44
                                        bg: '#FFF', //（可選項(xiàng)）字符串類型；導(dǎo)航條背景色，支持rgb、rgba()、#、img；默認(rèn)：#969696
                                        titleSize: 20, //（可選性）數(shù)字類型；標(biāo)題文本字體大??；默認(rèn)：13
                                        titleColor: '#EEB422', //（可選項(xiàng))字符串類型；標(biāo)題文本顏色，支持rgb、rgba、#；默認(rèn)：#121212
                                        title: '標(biāo)題文字', //（可選項(xiàng))字符串類型；標(biāo)題文本；默認(rèn)：空（不顯示）
                                },
                                leftBtn: { //（可選項(xiàng)）JSON對(duì)象；導(dǎo)航條左邊按鈕配置
                                        w: 44, //（可選項(xiàng)）數(shù)字類型；按鈕寬度；默認(rèn)：50
                                        h: 44, //（可選項(xiàng)）數(shù)字類型；按鈕高度；默認(rèn)：34
                                        marginL: 10, //（可選項(xiàng)）數(shù)字類型；按鈕左邊距；默認(rèn)：10
                                        bg: '#FFF', //（可選項(xiàng)）字符串類型；按鈕背景色，支持rgb、rgba()、#、img；默認(rèn)：#969696
                                        textSize: 18, //（可選性）數(shù)字類型；按鈕文本字體大??；默認(rèn)：12
                                        textColor: '#EEB422', //（可選項(xiàng))字符串類型；按鈕文本顏色，支持rgb、rgba、#；默認(rèn)：#121212
                                        text: '取消' //（可選項(xiàng))字符串類型；按鈕標(biāo)題文本；默認(rèn)：取消
                                },
                                rightBtn: { //（可選項(xiàng)）JSON對(duì)象；導(dǎo)航條右邊按鈕配置
                                        w: 44, //（可選項(xiàng)）數(shù)字類型；按鈕寬度；默認(rèn)：50
                                        h: 44, //（可選項(xiàng)）數(shù)字類型；按鈕高度；默認(rèn)：34
                                        marginR: 10, //（可選項(xiàng)）數(shù)字類型；按鈕右邊距；默認(rèn)：10
                                        bg: '#FFF', //（可選項(xiàng)）字符串類型；按鈕背景色，支持rgb、rgba()、#、img；默認(rèn)：#969696
                                        textSize: 18, //（可選性）數(shù)字類型；按鈕標(biāo)題文本字體大??；默認(rèn)：12
                                        textColor: '#EEB422', //（可選項(xiàng))字符串類型；按鈕文本顏色，支持rgb、rgba、#；默認(rèn)：#121212
                                        text: '確定' //（可選項(xiàng))字符串類型；按鈕標(biāo)題文本；默認(rèn)：確定
                                },
                                content: { //（可選項(xiàng)）JSON對(duì)象；選擇器區(qū)域樣式配置
                                        h: 44, //（可選項(xiàng)）數(shù)字類型；按鈕高度；默認(rèn)：134
                                        bg: '#FFF', //（可選項(xiàng)）字符串類型；選擇器背景色，支持rgb、rgba()、#、img；默認(rèn)：#969696
                                        size: 18, //（可選性）數(shù)字類型；滾輪顯示文字大??；默認(rèn)：12
                                        active: '#000', //（可選項(xiàng))字符串類型；滑到選中位置后的文本顏色，支持rgb、rgba、#；默認(rèn)：#000000
                                        inactive: '#C5C1AA', //（可選項(xiàng))字符串類型；滑到非選中位置后的文本顏色，支持rgb、rgba、#；默認(rèn)：#8A8A8A
                                        divider: '#EEEED1' // (可選項(xiàng))字符串類型；分隔線的顏色，支持rgb、rgba、#；默認(rèn)：#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)
                        });
                });
復(fù)制代碼