UICustomPicker 实现时间选择器的例子分享

uoaccw

本帖最后由 uoaccw 于 2019-1-5 13:45 编辑

//
// UICustomPicker 是一个自定义程度相当高的模块，可以灵活的使用，实现各种选择器组件。值得推荐。
// 虽然是一个小功能，但如果自己用js,html 去写，也要费一些功夫吧。使用模块分分钟搞定，体现出模块化开发的优势。
// 模块文档地址： https://docs.apicloud.com/Client-API/UI-Layout/UICustomPicker
// 下面直接看代码和运行效果。可以上下滑动数字选择。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {
padding: 30px
}
</style>
</head>
<body>
<button type="button" onclick="fnUICustomPicker_open()" name="button">fnUICustomPicker_open</button>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
};
function fnUICustomPicker_open() {
var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.open({
rect: {
x: 10,
y: api.frameHeight / 2 - 170,
w: api.frameWidth - 60,
h: 340
},
styles: {
bg: 'rgba(0,0,0,0)',
normalColor: '#959595',
selectedColor: '#3685dd',
selectedSize: 36,
tagColor: '#3685dd',
tagSize: 14
},
data: [{
tag: '时',
scope: '0-23'
}, {
tag: '分',
scope: '0-59'
}],
rows: 3,
fixedOn: api.frameName,
fixed: true
}, function(ret, err) {
if (ret.eventType == "show") {
UICustomPicker.setValue({
id: ret.id,
data: ['12', '30']
});
}
});
}
</script>
</html>

复制代码

gigie

感谢分享。

樱木花道VS松 · 回复于2018-12-26 19:21:58

您好，这个控件划一下走一格吗？我用它做时间选择控件，划一下走一格，不像其他app那样，刷走好多，，，

Mr.Zfc

怎么用方法获取选中的值

沉睡中的king

楼主，我移植成功了，选择的数字也出来了，为什么一滑动，整个界面在动，而不是数字在动

技术咨询-F

沉睡中的king 发表于 2019-5-16 09:11
楼主，我移植成功了，选择的数字也出来了，为什么一滑动，整个界面在动，而不是数字在动 ...

openFrame有个参数（bounces）是控制弹动效果的，设置为false

AppMing · 回复于2019-11-19 14:04:41

技术支持-F 发表于 2019-5-17 11:04
openFrame有个参数（bounces）是控制弹动效果的，设置为false

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

杨永安

技术支持-F 发表于 2019-5-17 11:04
openFrame有个参数（bounces）是控制弹动效果的，设置为false

禁用选项好使吗

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

{
"rect": {
"x": 0,
"y": 590,
"w": 375,
"h": 188
},
"styles": {
"bg": "rgba(56,56,59,1)",
"normalColor": "rgba(255,255,255,0.4)",
"selectedColor": "rgba(255,255,255,0.84)",
"disableSelectColor": "#949494",
"selectedSize": 18
},
"data": [
{
"scope": [
{
"value": "1轮",
"id": 1
},
{
"value": "2轮",
"id": 2
},
{
"value": "3轮",
"id": 3
},
{
"value": "4轮",
"id": 4
},
{
"value": "5轮",
"id": 5
}
]
}
],
"disableSelect": [
{
"scope": [
{
"value": "1轮",
"id": 1
},
{
"value": "2轮",
"id": 2
}
]
}
],
"rows": 3,
"fixedOn": "z_tan",
"fixed": true,
"autoHide": false,
"loop": false
}

复制代码