背景:在移动端开发中,使用了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