帖子
帖子
用户
博客
课程

H5模块使用教程

YonBuilder移动开发 2022-5-26 18:22 768人浏览 13人回复
原作者: yxWin 收藏 邀请
摘要

H5模块使用 模块store中找到自己想要的模块,立即使用。然后去控制台选择添加的项目。找到添加的模块,点击下载,再将文件导入到自己的项目中,就可以使用了。 图片有点小了,下面有大图。。。。 以H5TimeSelector ...

H5模块使用

模块store中找到自己想要的模块,立即使用。然后去控制台选择添加的项目。
找到添加的模块,
点击下载,再将文件导入到自己的项目中
就可以使用了。

图片有点小了,下面有大图。。。。

以H5TimeSelector为例



页面代码

<!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"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
   <link rel="stylesheet" type="text/css" href="../css/iosselect.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style media="screen">
        *{ margin: 0; padding: 0; }
        html,body{ height: 100%; display: flex; justify-content: center; align-items: center;}
        span{ align-items: center; }

        /*控制选择器标题样式*/
        #iosSelectTitle{ color: #000; font-size: 16px; }
        /*控制选择器头部样式*/
        .ios-select-widget-box header.iosselect-header{ background-color: white; height: 50px; line-height: 50px; }
        /*控制确定按钮样式*/
        .ios-select-widget-box header.iosselect-header a{ color: #EF5B23; }
        /*控制取消按钮样式*/
        .ios-select-widget-box header.iosselect-header a.close{ color: #999999;  }
    </style>
</head>
<body >
    <span tapmode>打开一个时间选择器</span>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/iosselect.js"></script>
<script type="text/javascript" src="../script/timeselector.js"></script>
<script type="text/javascript">
    function fnOpenSelector(){
        timeSelector.fnOpenSelector({
            title: '时间选择',                          //选填 |  '时间选择'    |  String         |  选择器标题文案
            sureText: '完成',                          //选填 |    '完成'      |  String        |   确定按钮文案
            isShowUnit: true,                         //选填 |     true      |  Boolean        |  是否显示中文单位名称
            itemShowCount: 5,                         //选填 |      5        |  Number         |  显示的行数
            itemHeight: 55,                           //选填 |      55       |  Number         |  行高度(单位px)
            date: '2018/12/12'                          //选填 |   new Date    |  Date/String     |  默认选中的时间
                                                      //                       new Date()、'1541224673842'    展示年月日时分秒
                                                      //                       '2018/12'                      展示年月
                                                      //                       '2018/12/12'                   展示年月日
                                                      //                       '2018/12/12 12'                展示年月日时
                                                      //                       '2018/12/12 12:12'             展示年月日时分
                                                      //                       '2018/12/12 12:12:12'          展示年月日时分秒
        }, function(ret){
              //ret.date
                            //非必返     |          |  Date            |  如果点击确定则返回选中的时间,否则返回空
        })
    }
</script>
</html>

运行截图


注:自定义loader调试无需重新编译 如云编译则需要同步代码。




h53.jpg
h5-1.jpg
h5-2.jpg
评论
768人参与,13条评论

精彩评论

查看全部评论>>