技术

【填坑日记】mint-ui mt-datetime-picker穿透滚动问题

微信扫一扫,分享到朋友圈

【填坑日记】mint-ui mt-datetime-picker穿透滚动问题
0 0

1.遇到的问题:使用mint-ui的弹窗选择时底部页面会出现滚动效果(仅出现在苹果手机,安卓手机,pc端正常)

2.问题原因:滚动穿透,这是啥,我也不懂

3.解决方式:弹出层打开的时候禁止body的滑动事件,弹出层关闭恢复body的滑动事件

对应事件名称是visible-change,代码里面有,文档里面居然没说明!

代码如下:

//对应的组件上面添加事件
<mt-datetime-picker v-model="value" @confirm="handleConfirm" @visible-change="handleValueChange">
    </mt-datetime-picker>


//Vue数据变量区域
data(){
   handler:function(e){e.preventDefault();}
},

//Vue函数方法区域
methods:{
handleValueChange(val){
  if(val) {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
  }else{
    document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false });    }}}

 

参考文档:

https://blog.csdn.net/amyleeYMY/article/details/82588477

半拉子前端的自留地,发际线逐渐后移的抠脚大叔!

前后端分离彻底与后端说分手Mock.js + Node.js

上一篇

【填坑日记】Form Validate 多重复杂组件校验滞后

下一篇

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

体验小程序

标签地图

分类

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00
      【填坑日记】mint-ui mt-datetime-picker穿透滚动问题

      长按储存图像,分享给朋友

      微信扫一扫

      微信扫一扫