apicloud apicloud

注册
查看: 797|回复: 0

[模块教程] UIPickerView 模块示例demo

主题:
353
帖子:
49108
云币:
21303

[模块教程] UIPickerView 模块示例demo

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

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

效果图:


open示例代码:
  1. var UIPickerView = api.require('UIPickerView');
  2.                 UIPickerView.open({
  3.                         styles: {
  4.                                 navigator: { //(可选项)JSON对象;导航条配置
  5.                                         h: 44, //(可选性)数字类型;导航条高度;默认:44
  6.                                         bg: '#FFF', //(可选项)字符串类型;导航条背景色,支持rgb、rgba()、#、img;默认:#969696
  7.                                         titleSize: 20, //(可选性)数字类型;标题文本字体大小;默认:13
  8.                                         titleColor: '#EEB422', //(可选项)字符串类型;标题文本颜色,支持rgb、rgba、#;默认:#121212
  9.                                         title: '标题文字', //(可选项)字符串类型;标题文本;默认:空(不显示)
  10.                                 },
  11.                                 leftBtn: { //(可选项)JSON对象;导航条左边按钮配置
  12.                                         w: 44, //(可选项)数字类型;按钮宽度;默认:50
  13.                                         h: 44, //(可选项)数字类型;按钮高度;默认:34
  14.                                         marginL: 10, //(可选项)数字类型;按钮左边距;默认:10
  15.                                         bg: '#FFF', //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#969696
  16.                                         textSize: 18, //(可选性)数字类型;按钮文本字体大小;默认:12
  17.                                         textColor: '#EEB422', //(可选项)字符串类型;按钮文本颜色,支持rgb、rgba、#;默认:#121212
  18.                                         text: '取消' //(可选项)字符串类型;按钮标题文本;默认:取消
  19.                                 },
  20.                                 rightBtn: { //(可选项)JSON对象;导航条右边按钮配置
  21.                                         w: 44, //(可选项)数字类型;按钮宽度;默认:50
  22.                                         h: 44, //(可选项)数字类型;按钮高度;默认:34
  23.                                         marginR: 10, //(可选项)数字类型;按钮右边距;默认:10
  24.                                         bg: '#FFF', //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#969696
  25.                                         textSize: 18, //(可选性)数字类型;按钮标题文本字体大小;默认:12
  26.                                         textColor: '#EEB422', //(可选项)字符串类型;按钮文本颜色,支持rgb、rgba、#;默认:#121212
  27.                                         text: '确定' //(可选项)字符串类型;按钮标题文本;默认:确定
  28.                                 },
  29.                                 content: { //(可选项)JSON对象;选择器区域样式配置
  30.                                         h: 44, //(可选项)数字类型;按钮高度;默认:134
  31.                                         bg: '#FFF', //(可选项)字符串类型;选择器背景色,支持rgb、rgba()、#、img;默认:#969696
  32.                                         size: 18, //(可选性)数字类型;滚轮显示文字大小;默认:12
  33.                                         active: '#000', //(可选项)字符串类型;滑到选中位置后的文本颜色,支持rgb、rgba、#;默认:#000000
  34.                                         inactive: '#C5C1AA', //(可选项)字符串类型;滑到非选中位置后的文本颜色,支持rgb、rgba、#;默认:#8A8A8A
  35.                                         divider: '#EEEED1' // (可选项)字符串类型;分隔线的颜色,支持rgb、rgba、#;默认:#0D0D0D
  36.                                 }
  37.                         },
  38.                         mask: 'rgba(0,0,0,0.1)', //'rgba(0,0,0,0.2)',  //仅支持ios
  39.                         animation: true,
  40.                         checked: ['004', '003', '001'],
  41.                         datas: [
  42.                                 [{
  43.                                         'id': '001',
  44.                                         'text': '刘德华',
  45.                                         'nickname': '123'
  46.                                 }, {
  47.                                         'id': '002',
  48.                                         'text': '张三',
  49.                                         'nickname': '123'
  50.                                 }, {
  51.                                         'id': '003',
  52.                                         'text': '李四',
  53.                                         'nickname': '123'
  54.                                 }, {
  55.                                         'id': '004',
  56.                                         'text': '王五',
  57.                                         'nickname': '123'
  58.                                 }, {
  59.                                         'id': '005',
  60.                                         'text': '赵六',
  61.                                         'nickname': '123'
  62.                                 }],
  63.                                 [{
  64.                                         'id': '001',
  65.                                         'text': '刘-90',
  66.                                         'nickname': '123'
  67.                                 }, {
  68.                                         'id': '002',
  69.                                         'text': '张-30',
  70.                                         'nickname': '123'
  71.                                 }, {
  72.                                         'id': '003',
  73.                                         'text': '王李-60',
  74.                                         'nickname': '123'
  75.                                 }, {
  76.                                         'id': '004',
  77.                                         'text': '王-00',
  78.                                         'nickname': '123'
  79.                                 }, {
  80.                                         'id': '005',
  81.                                         'text': '赵-80',
  82.                                         'nickname': '123'
  83.                                 }],
  84.                                 [{
  85.                                         'id': '001',
  86.                                         'text': '刘德华',
  87.                                         'nickname': '123'
  88.                                 }, {
  89.                                         'id': '002',
  90.                                         'text': '张三',
  91.                                         'nickname': '123'
  92.                                 }, {
  93.                                         'id': '003',
  94.                                         'text': '李四',
  95.                                         'nickname': '123'
  96.                                 }, {
  97.                                         'id': '004',
  98.                                         'text': '王五',
  99.                                         'nickname': '123'
  100.                                 }, {
  101.                                         'id': '005',
  102.                                         'text': '赵六',
  103.                                         'nickname': '123'
  104.                                 }]
  105.                         ],
  106.                         cyclic: true
  107.                 }, function(ret) {
  108.                         api.alert({
  109.                                 msg: "打开选择器模块:" + JSON.stringify(ret)
  110.                         });
  111.                 });
复制代码


附件为示例代码包。

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表