apicloud 日历弹框滑动时body顶部滑动问题 及mui dtpicker的使用方法

第一次用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  解决方法已奉上，希望可以帮助到大家。