此问题应属于移动端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(); // 阻止默认的处理方式(阻止下拉滑动的效果)
},
复制代码