vue/uniapp 动态禁止页面滚动(h5)

弹框时，底部会跟随滑动，用户体验不佳
原理简单，就是常用的css 来控制

1.封装方法 挂在到vue原型上

//弹出框禁止滑动
Vue.prototype.stopScroll = function () {
  var defaultNo = function (e) { e.preventDefault() }
  document.body.style.overflow = 'hidden'
  // 禁止页面滑动
  document.addEventListener('touchmove', defaultNo, false)
}
 
//弹出框可以滑动
Vue.prototype.canScroll = function () {
  var defaultNo = function (e) {
    e.preventDefault()
  }
  // 出现滚动条
  document.body.style.overflow = ''
  document.removeEventListener('touchmove', defaultNo, false)
}

2.触发事件 调用Vue 上的方法

直接在触发事件或者事件点调用
 this.stopScroll()
 this.canScroll()