移动端 使用筛选功能后,页面卡死

最近项目开发中, 使用带筛选功能,类似这样:

点击出现筛选框后, 下面的内容不允许滑动, 封装了一个方法

 

  bodyScroll (event) {
    event.preventDefault()
  },
  stopMove () {
    document.body.style.overflow = 'hidden'
    document.addEventListener('touchmove', this.bodyScroll, { passive: false })
  },
  startMove () {
    document.body.style.overflow = ''
    document.removeEventListener('touchmove', this.bodyScroll, { passive: false })
  }

 

在弹出筛选框后, 使用 stopMove() 方法,

在确认选择,或者 取消选择后, 使用  startMove() 方法,

在测试中,  返回上一个页面后,还是会卡死, 经查询, 原来是测试人员 使用了 手机自带的物理返回键

解决:

在app.vue中的mounted事件里, 监听 浏览器的前进和后退

   mounted: function () { // 组件加载完成
    window.onpopstate = () => {
     $.startMove()//这里用 $ 是因为 这个startMove方法 是封装在 $ 下面的
    }
   },