Javascript Touch事件學習筆記4 實現一個APP框架二 向上滑動實現內容重新加載
在上篇筆記中(進入)，簡略實現了網易新聞APP左右滑動的切屏效果。
這篇在上篇文章的基礎上來新增功能。
一：為了方便開發，在桌面瀏覽器上模擬touch事件。
1，因為，touch事件和mouse事件有著對應關系:touchustart對應mousedown；touchmove對應mousemove，touchend(touchcancel)對應mouseup。
新增如下事件綁定：
warpper.addEventListener("mousedown", this.CheckLeftStart, false);
warpper.addEventListener("mousemove", this.CheckLeftMove, false);
warpper.addEventListener("mouseup", this.CheckLeftEnd, false);
2，在獲取事件對象的時候，做如下處理
GetEventTargetObj: function (eventObj) {
if (typeof eventObj.changedTouches != "undefined") {
return eventObj.changedTouches[0];
}
else {
return eventObj;
}
}
這樣就基本模擬了移動端的touch事件。具體使用參看demo。
二：實現下拉的刷新，事件的過程大致如下：
1：當內容滑動到頂部的時候，再往下下拉，出現提示“下拉可以刷新”，下拉到一定程度后，提示變成“松開可以刷新”.
2:當松開后（touchend）判斷，如果滿足重新加載ajax加載事件。
開發中遇到的障礙：
1,在桌面瀏覽器端（我使用的是Chrome），使用document.defaultView.getComputedStyle獲取的數值都是以像素為準，所以如果在定位的時候使用的不是像素，那么定位的時候就會出錯。
使用element.style["left"]來替代，就可以獲取的具體的值了。
2,重新理解一遍CSS3中的transition屬性，這里的所有滑動效果都是使用這個屬性來實現的。其中還專門去查了下transition-timing-function的屬性值。
| 值 | 描述 |
|---|---|
| linear | 規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。 |
Demo入口：摸這里