此问题应归于移动端ios优化问题，适用于vue2项目

问题发生

  • 在查找界面，点击查找框之后ios键盘弹起，可视区域原高度不变，会进行翻滚（ios问题，安卓界面无问题）
  • ios 橡皮筋作用
  • 制止翻滚是为了让查找框位置固定
  • 由于查找框失掉焦点，界面翻滚时，查找框是固定的，只有查找出来的部分能够进行翻滚
  • 查找框为vant中用于查找场景的输入框组件
    解决移动端ios键盘弹起后可视区域滚动的问题

问题处理

在处理此问题并没有用修正可视区域的高度来处理此问题

监听事情制止滑动

移动端接触事情有三个，别离界说为

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事情

解决移动端ios键盘弹起后可视区域滚动的问题
解决移动端ios键盘弹起后可视区域滚动的问题

由于设置监听和移除监听时需要为同一事情，所以需要将事情提取出来单独写一个方法

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(); // 阻挠默许的处理方式(阻挠下拉滑动的作用)
},