【Vue2.0】mint-ui解决datetime-picker穿透滚动问题

背景:在移动端开发中,使用了mint-ui组件库,其中,使用组件popup组件和datetime-picker组件存在滚动性穿透问题。

一、问题原因

  • HTML5触摸事件touchmove事件:当手指在屏幕上滑动的时候会连续触发;
  • 所以,当激发出组件popup组件和datetime-picker的弹出层时,我们在弹出层选择内容时,上下连续滑动是会触发该事件的。

二、解决思路

  • 在弹出层出现之后阻止body的touchmove事件,在弹出层消失之后,移除阻止事件。

三、例外

       然而,Datetime-picker组件使用这个方法没用。由于Datetime-picker组件没有提供弹框显示和隐藏的绑定变量,所以,我们无采用解决popup的方式来解决问题,只能通过打开事件,确认事件,取消事件,点击事件,点击蒙层弹框消失这几个时间点去解决。官方给出的属性方法只支持确认事件,打开事件。没有明文给出取消事件的回调函数,更不支持点击蒙层弹框消失事件。

     最后,根据各方搜索,发现网友提供了一种简便方法,一行代码就解决问题了,实测有用,在此记录一下。

@touchmove.native.stop.prevent

<mt-datetime-picker
ref="picker3"
v-model="defaultBirthDayBBREnd"
type="date"
year-format="{value}年"
month-format="{value}月"
date-format="{value}日"
:startDate="startDateVperiod"
:endDate="new Date()"
@confirm="handleConfirm"
@touchmove.native.stop.prevent
>
</mt-datetime-picker>

参考博客:【Vue2.0】 mint-ui解决移动端picker和datetime picker穿透滚动问题  https://blog.csdn.net/amyleeYMY/article/details/82588477?utm_source=blogxgwz1

                    datetime-picker事件穿透问题解决一劳永逸   https://blog.csdn.net/web_xiaolei/article/details/102740789

                    Mint-ui 框架Popup和Datetime Picker组件滚动穿透解决方式    https://blog.csdn.net/u012374026/article/details/83822231

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值