189 8069 5689

UIPickerView模块示例demo

本文出自APICloud官方论坛

创新互联公司服务项目包括邵阳网站建设、邵阳网站制作、邵阳网页制作以及邵阳网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,邵阳网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到邵阳省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

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

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

效果图:
UIPickerView 模块示例demo

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)
                        });
                });
复制代码

分享标题:UIPickerView模块示例demo
本文来源:http://cdxtjz.cn/article/jdoice.html

其他资讯