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