此问题应归于移动端ios优化问题,适用于vue2项目
问题发生
- 在查找界面,点击查找框之后ios键盘弹起,可视区域原高度不变,会进行翻滚(ios问题,安卓界面无问题)
- ios 橡皮筋作用
- 制止翻滚是为了让查找框位置固定
- 由于查找框失掉焦点,界面翻滚时,查找框是固定的,只有查找出来的部分能够进行翻滚
-
查找框为vant中用于查找场景的输入框组件
问题处理
在处理此问题并没有用修正可视区域的高度来处理此问题
监听事情制止滑动
移动端接触事情有三个,别离界说为
1. touchstart :手指放在一个DOM元素上。
2. touchmove :手指拖曳一个DOM元素。
3. touchend :手指从一个DOM元素上移开。
touchmove
事情的速度是能够完成界说的,取决于硬件性能和其他完成细节
preventDefault
方法,阻挠同一触点上一切默许行为,比方翻滚。
由此找到处理方案,通过监听touchmove
,让需要滑动的当地滑动,不需要滑动的当地制止滑动。
完成如下:
document.body.addEventListener('touchmove', function(e) {
if(e._isScroller) return;
// 阻挠默许事情
e.preventDefault();
}, {
passive: false
});
详细处理
在查找框取得焦点时触发touchmove
事情
在查找框失掉焦点时移除touchmove
事情


由于设置监听和移除监听时需要为同一事情,所以需要将事情提取出来单独写一个方法
focus() {
document.body.addEventListener("touchmove", this.stop, {
passive: false,
}); // passive 参数不能省略,用来兼容ios和android
},
blur() {
document.body.removeEventListener("touchmove", this.stop, {
passive: false,
});
},
stop(e) {
e.preventDefault(); // 阻挠默许的处理方式(阻挠下拉滑动的作用)
},
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。