移動端問題總結

移動端開發過程當中碰到的問題，持續更新中...

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