H5模块使用教程

yxWin

本帖最后由 yxWin 于 2019-7-25 18:06 编辑

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调试无需重新编译如云编译则需要同步代码。

最末@

谢谢大佬

豪气布拉格

大佬，好帖子

易大侠

感谢大佬分享

雨哥哥。

力挺大佬

辉哥_0808

这和js插件一个道理?

yxWin

辉哥_0808 发表于 2019-7-27 10:09
这和js插件一个道理?

同理，封装好引用

Mr.ZhouHeng

这谁会搞

筦陶

赞一个

strive refuel

返回的如期不对
少了一天