移动端问题总结

移动端开发过程当中碰到的问题，持续更新中...

1、 穿透问题（滚动条丢失）

在开发弹框组件，或者抽屉组件时，咱们会碰到一个问题，就是要确保浮层下面的内容不能滚动，对于这个问题，有两种解决方案

1. 不须要滚动的组件 这个方法是直接禁止滑动的默认事件，所以弹框和浮层下面的body都没法滚动

   <div @touchmove.prevent="stopScroll">
   	</div>
   	method: {
   		stopSroll() {
   			event.preventDefault()
   		}
   	}

2. 须要滚动的组件 watch控制当前组件的status，为当前body和html设置overflow:hidden， 必须都设置才行

   watch: {
   		status() {
   		  //禁止列表滚动
   		  if (this.status) {
   			// 保存滚动条的高度
   			this.scrollTop = document.scrollingElement.scrollTop
   			document.body.style.overflow = 'hidden'
   			document.querySelector('html').style.overflow = 'hidden'
   			document.body.addEventListener('touchmove', this.preventDefault(event), false)
   		  } else {
   			document.body.style.overflow = ''
   			document.querySelector('html').style.overflow = ''
   			document.body.removeEventListener('touchmove', this.preventDefault(event), false)
   			document.scrollingElement.scrollTop = this.scrollTop
   		  }
   		}
   	  }