apicloud apicloud

注册
查看: 1755|回复: 6

[模块教程] UICustomPicker 实现时间选择器的例子分享

实习司机

UID:253705

主题:
53
帖子:
175
云币:
494

[模块教程] UICustomPicker 实现时间选择器的例子分享

1755 6 | 发表于 2018-3-24 14:26:59 |阅读模式 | |
本帖最后由 uoaccw 于 2019-1-5 13:45 编辑
  1. //  
  2. //    UICustomPicker  是一个自定义程度相当高的模块,可以灵活的使用,实现各种选择器组件。值得推荐。
  3. //    虽然是一个小功能,但如果自己用js,html 去写,也要费一些功夫吧。使用模块分分钟搞定,体现出模块化开发的优势。
  4. //    模块文档地址: https://docs.apicloud.com/Client-API/UI-Layout/UICustomPicker
  5. //    下面直接看代码和运行效果。可以上下滑动数字选择。




  6. <!DOCTYPE html>
  7. <html>

  8. <head>
  9.     <meta charset="utf-8">
  10.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  11.     <title>title</title>
  12.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  13.     <style>
  14.         body {
  15.             padding: 30px
  16.         }
  17.     </style>
  18. </head>

  19. <body>
  20.     <button type="button" onclick="fnUICustomPicker_open()" name="button">fnUICustomPicker_open</button>
  21. </body>
  22. <script type="text/javascript" src="../script/api.js"></script>
  23. <script type="text/javascript">
  24.     apiready = function() {

  25.     };

  26.     function fnUICustomPicker_open() {
  27.       var UICustomPicker = api.require('UICustomPicker');
  28.       UICustomPicker.open({
  29.           rect: {
  30.               x: 10,
  31.               y: api.frameHeight / 2 - 170,
  32.               w: api.frameWidth - 60,
  33.               h: 340
  34.           },
  35.           styles: {
  36.               bg: 'rgba(0,0,0,0)',
  37.               normalColor: '#959595',
  38.               selectedColor: '#3685dd',
  39.               selectedSize: 36,
  40.               tagColor: '#3685dd',
  41.               tagSize: 14
  42.           },
  43.           data: [{
  44.               tag: '时',
  45.               scope: '0-23'
  46.           }, {
  47.               tag: '分',
  48.               scope: '0-59'
  49.           }],
  50.           rows: 3,
  51.           fixedOn: api.frameName,
  52.           fixed: true
  53.       }, function(ret, err) {
  54.           if (ret.eventType == "show") {
  55.               UICustomPicker.setValue({
  56.                   id: ret.id,
  57.                   data: ['12', '30']
  58.               });
  59.           }
  60.       });
  61.     }
  62. </script>

  63. </html>

复制代码


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

老司机

UID:253706

主题:
177
帖子:
16969
云币:
8001
发表于 2018-3-26 12:01:26 |
感谢分享。

主题:
98
帖子:
279
云币:
384
发表于 2018-12-26 19:21:58 |
您好,这个控件划一下走一格吗?我用它做时间选择控件,划一下走一格,不像其他app那样,刷 走好多,,,

新手上路

UID:601490

主题:
31
帖子:
99
云币:
118
发表于 2019-1-17 14:24:20 |
怎么用方法获取选中的值

主题:
0
帖子:
1
云币:
3
发表于 2019-5-16 09:11:02 |
楼主,我移植成功了,选择的数字也出来了,为什么一滑动,整个界面在动,而不是数字在动

主题:
62
帖子:
28246
云币:
13104
发表于 2019-5-17 11:04:13 |
沉睡中的king 发表于 2019-5-16 09:11
楼主,我移植成功了,选择的数字也出来了,为什么一滑动,整个界面在动,而不是数字在动 ...

openFrame有个参数(bounces)是控制弹动效果的,设置为false

驾校小白

UID:741245

主题:
13
帖子:
65
云币:
80
发表于 3 天前 |
技术支持-F 发表于 2019-5-17 11:04
openFrame有个参数(bounces)是控制弹动效果的,设置为false

背景色。。。为什么是透明的 不可以设置 好难受
您需要登录后才可以回帖 登录 | 立即注册

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