頂部下拉展現頁面

關於touch事件基礎：

三類事件：

touchstart、touchmove、touchend

三個觸摸列表：

touches：正在觸摸屏幕的全部手指的一個列表，手指離開屏幕後對應元素被清除

targetTouches：正在觸摸當前DOM元素上的手指的一個列表，手指離開屏幕後對應元素被清除

changeTouches：涉及當前事件的一個列表，手指離開屏幕後對應元素依舊存在

這些列表的結構以下：

其中下標 0 對應touch對象，length表示觸發事件的手指個數；

下拉顯示的類容的佈局設置：

絕對定位於但是區域的上方，下拉時，元素總體向下移，類容便可顯示。

position：absolute;

top：-translateY

下拉事件的處理：

//開始觸摸屏幕
onTouchStart = (e) => {
  this.setState({
    startY: e.touches[0].pageY //手指初始位置在頁面的縱座標
  });
}
//手指離開屏幕
onTouchEnd = (e) => {
  let _element = document.getElementById('refreshContainer');
  let moveY = e.changedTouches[0].pageY - this.state.startY; //手指在垂直方向移動的距離（e.changedTouches[0].pageY：手指離開屏幕時在頁面的縱座標） if (moveY > 55 && +document.documentElement.scrollTop === 0) {　//垂直方向移動大於55，且滾動條在最頂部（滾動條在最頂端的時候， scrollTop=0）
    _element.style.transform = `translateY(${this.state.translateY})`; //元素沿垂直方向移動的距離（爲下拉顯示類容的高度）
  } 
}