在上篇笔记中(进入)，简略实现了网易新闻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入口：摸这里