移动端问题总结

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

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

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

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
   		  }
   		}
   	  }