最近專案開發中, 使用帶篩選功能,類似這樣:

點擊出現篩選框後, 下面的內容不允許滑動, 封裝了一個方法

  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方法 是封裝在 $ 下面的
    }
   },