apicloud 日历弹框滑动时body顶部滑动问题 及mui dtpicker的使用方法
2017-09-06 10:19
369 查看
第一次用apicloud开发项目,所以遇到了不少坑坑,
在项目中有用到mui的dtpicker日历控件,但测试时会发现当滑动选择日期时,body也会跟着一起动,一开始以为是样式控制的问题,网上也找了很多解决方法,试过后都木有用,苦恼了很久,最终找到了解决方法,下面就详细介绍给大家;
首先,mui 的dtpicker用法
页面需要引入的文件:
<link rel="stylesheet" type="text/css" href="../../../css/mui/css/mui.min.css">
<link rel="stylesheet" type="text/css" href="../../../css/mui/css/mui.picker.min.css">
<script type="text/javascript" src="../../../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../../../script/mui/mui.picker.min.js"></script>
js写法:
在项目中有用到mui的dtpicker日历控件,但测试时会发现当滑动选择日期时,body也会跟着一起动,一开始以为是样式控制的问题,网上也找了很多解决方法,试过后都木有用,苦恼了很久,最终找到了解决方法,下面就详细介绍给大家;
首先,mui 的dtpicker用法
页面需要引入的文件:
<link rel="stylesheet" type="text/css" href="../../../css/mui/css/mui.min.css">
<link rel="stylesheet" type="text/css" href="../../../css/mui/css/mui.picker.min.css">
<script type="text/javascript" src="../../../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../../../script/mui/mui.picker.min.js"></script>
js写法:
mui.init() const texts = $('.sDate')//选择元素; texts.on('tap', function () {此处一定要用tap事件,不然弹框弹出后body底部会滑动 const result = $(this) const dtpicker = new mui.DtPicker({ type: 'date', //设置日历初始视图模式 labels: ['年', '月', '日'], //设置默认标签区域提示语,可以自己更改 }) dtpicker.show((rs) => { result.text (rs.text)//将选中的日期放入制定元素中; dtpicker.dispose()//点击结束后关闭弹窗 }) })
最终找到的原因是因为apicloud 的openFrame方法,会造成影响,具体解决代码如下:
texts.on('tap', function () { //弹窗弹出后禁止body滑动 api.setFrameAttr({ name: 'record_frm', bounces: false }) const result = $(this) const dtpicker = new mui.DtPicker({ type: 'date', //设置日历初始视图模式 labels: ['年', '月', '日'], //设置默认标签区域提示语,可以自己更改 }) dtpicker.show((rs) => { result.text (rs.text)//将选中的日期放入制定元素中; dtpicker.dispose()//点击结束后关闭弹窗 //弹窗关闭后允许body滑动 api.setFrameAttr({ name: 'record_frm', bounces: true }) }) })
ok 解决方法已奉上,希望可以帮助到大家。
相关文章推荐
- jQuery-ui 的datepicker日历插件使用clone()出来的input无法选择问题
- My97 DatePicker 主流日历空间基本使用方法
- 返回顶部的3中方法(解决移动端使用zepto没有滑动的效果)
- 使用bootstrap日历datetimepicker插件方法
- 使用@ResponseBody的一些问题以及解决方法
- struts中datetimepicker使用问题 datetimepicker debug 以及 解决方法
- WdatePicker.js的使用方法 帮助文档 (日历控件)
- bootstrap日历插件datetimepicker使用方法
- MY97WdatePicker日历控件使用方法
- WdatePicker—WdatePicker日历控件使用方法
- datepicker日历插件使用方法
- bootstrap-datetimepicker的使用方法和兼容问题
- WdatePicker.js的使用方法 帮助文档 (日历控件)
- jqeury mobile swiperight swiperight 左右滑动使用方法和遇到的问题
- jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
- 使用Microsoft Date And Time Picker Control 6.0(SP6)时要注意的小问题
- 关于使用asp.net调试器出现的问题及相关解决方法
- 使用JasperReports合并多个报表的word文档问题解决方法
- 安装完vs.2005之后,重新安装iis后无法使用http方式访问asp.net工程的页面的问题的解决方法
- 使用梅花雨日历控件应该注意的问题