vue中移动端禁止页面滑动穿透

1 通过样式

    // 禁止滚动
    stop () {
      var mo = function (e) {
        e.preventDefault()
      }
      let cssStr = 'overflow-y: hidden; height: 100%;'
      document.getElementsByTagName('body')[0].style.cssText = cssStr
      document.documentElement.style.height = '100%'
      document.documentElement.style.overflow = 'hidden'
      document.body.style.cssText = cssStr
      document.addEventListener('touchmove', mo, false) // 禁止页面滑动
    },

    //  取消滑动限制
    move () {
      var mo = function (e) {
        e.preventDefault()
      }
      let cssStr = 'overflow-y: auto; height: auto;'
      document.getElementsByTagName('body')[0].style.cssText = cssStr
      document.documentElement.style.overflow = 'scroll'
      document.body.style.cssText = cssStr
      document.removeEventListener('touchmove', mo, false)
    },

缺点： 每次禁止滚动之后，页面都会跑到最上面，不会保留滑动的位置

2 阻止默认事件 @touchmove.prevent

绑定事件@touchmove='touchEvent'

	touchEvent (event) {
        event.preventDefault()
    }
或者直接 @touchmove.prevent

缺点： 会阻止页面子元素的滚动事件，如果页面有弹框，就意味着弹框的滚动事件也被禁止了

3 通过插件 tua-body-scroll-lock

$ npm i -S tua-body-scroll-lock
# OR
$ yarn add tua-body-scroll-lock

import { lock, unlock } from 'tua-body-scroll-lock'

const targetElement = document.querySelector('#content')//需要滚动的元素

lock(targetElement)//禁止滚动

unlock(targetElement)//恢复滚动

4保留滚动位置

    // 禁止页面滚动
    lockBody () {
      const { body } = document
      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
      body.style.position = 'fixed'
      body.style.width = '100%'
      body.style.top = `-${scrollTop}px`
    },
    // 允许页滚动
    resetBody () {
      const { body } = document
      const { top } = body.style
      body.style.position = ''
      body.style.width = ''
      body.style.top = ''
      document.body.scrollTop = -parseInt(top, 10)
      document.documentElement.scrollTop = -parseInt(top, 10)
    },

以上四种方法，基本能满足需求啦