apicloud apicloud

注册
查看: 3646|回复: 7

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

管理员

UID:253705

主题:
53
帖子:
460
云币:
852

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

3646 7 | 发表于 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

主题:
176
帖子:
16972
云币:
8007
发表于 2018-3-26 12:01:26 |
感谢分享。

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

新手上路

UID:601490

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

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

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

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

驾校小白

UID:741245

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

背景色。。。为什么是透明的 不可以设置 好难受

马路杀手

UID:722608

主题:
8
帖子:
274
云币:
328
发表于 2020-10-9 19:04:25 |
技术支持-F 发表于 2019-5-17 11:04
openFrame有个参数(bounces)是控制弹动效果的,设置为false

禁用选项好使吗

我的打开参数如下,没有触发禁用选择

  1. {
  2.     "rect": {
  3.         "x": 0,
  4.         "y": 590,
  5.         "w": 375,
  6.         "h": 188
  7.     },
  8.     "styles": {
  9.         "bg": "rgba(56,56,59,1)",
  10.         "normalColor": "rgba(255,255,255,0.4)",
  11.         "selectedColor": "rgba(255,255,255,0.84)",
  12.         "disableSelectColor": "#949494",
  13.         "selectedSize": 18
  14.     },
  15.     "data": [
  16.         {
  17.             "scope": [
  18.                 {
  19.                     "value": "1轮",
  20.                     "id": 1
  21.                 },
  22.                 {
  23.                     "value": "2轮",
  24.                     "id": 2
  25.                 },
  26.                 {
  27.                     "value": "3轮",
  28.                     "id": 3
  29.                 },
  30.                 {
  31.                     "value": "4轮",
  32.                     "id": 4
  33.                 },
  34.                 {
  35.                     "value": "5轮",
  36.                     "id": 5
  37.                 }
  38.             ]
  39.         }
  40.     ],
  41.     "disableSelect": [
  42.         {
  43.             "scope": [
  44.                 {
  45.                     "value": "1轮",
  46.                     "id": 1
  47.                 },
  48.                 {
  49.                     "value": "2轮",
  50.                     "id": 2
  51.                 }
  52.             ]
  53.         }
  54.     ],
  55.     "rows": 3,
  56.     "fixedOn": "z_tan",
  57.     "fixed": true,
  58.     "autoHide": false,
  59.     "loop": false
  60. }
复制代码
您需要登录后才可以回帖 登录 | 立即注册

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