问题:注册页面,输入完手机号和注册密码,点击获取验证码,图片验证码弹窗弹出,一切进行的都很完美。然而在ios微信浏览器里面,无论点击哪里,弹出层毫无响应。

开始排查问题:

  • 首先排除不是z-index导致元素点不到,进而无法触发点击事件。

  • 因为使用vue框架,所以给click事件加上一个native修饰符,然而仍然毫无响应。

  • 然后再排除不是因为css导致无法触发点击事件。

  • 直到滑一下页面,才能正常响应点击事件。

一番搜索尝试之后,仍然不知道为什么会出现这个bug,最后认为可能是微信浏览器在ios系统里面的特殊表现,所以还是选择滑动页面来解决问题。

使用js滑动页面应该不是什么问题,可以使用document.body.scrollTop或者window.scrollTo()来控制页面滑动。

最后我选择在输入框失去焦点时,使用window.scrollTop来滑动页面。

代码如下

function kickBack() {
  window.scrollTo(0, document.body.scrollTop + 1);
  document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);
}

写完之后,自测发现时灵时不灵,怎么办?加setTimeout。

function kickBack() {
  setTimeout(() => {
    window.scrollTo(0, document.body.scrollTop + 1);
    document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);  
  }, 10)
}

再测,发现完美解决问题。

然而为什么这么解决,却是一脸懵。。。

Logo

前往低代码交流专区

更多推荐