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

第一次用apicloud开发项目,所以遇到了不少坑坑,

在项目中有用到mui的dtpicker日历控件,但测试时会发现当滑动选择日期时,body也会跟着一起动,一开始以为是样式控制的问题,网上也找了很多解决方法,试过后都木有用,苦恼了很久,最终找到了解决方法,下面就详细介绍给大家;

首先,mui 的dtpicker用法

页面需要引入的文件:

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

 
  

你可能感兴趣的:(控件使用)