您的位置:首页 > 产品设计 > UI/UE

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.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  解决方法已奉上,希望可以帮助到大家。




                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息