移动端web向下滑动弹出搜索

来源:luqidong 发布时间:2014-05-05 21:46:15 点击数:

  在淘宝移动端的网站上面我们点击一个列表页将会出现一串产品,此刻我们可以向下滑动搜索我们所需的产品或者服务。如果翻了翻没有我们想要的话,我们就会直接向上翻然后进行搜索,如图所示:

78OA办公系统

如果我们需要翻到最上面的话需要一直翻到顶端这样的效果肯定不是很好,所以淘宝做的移动端web只要用户往上翻一下就会出来搜索框,这是如何做的到的呢、。

其实在移动端有个事件叫做touchstar和touchend,我们可以通过touchstar和touchend的差来判断用户是向上滑动还是向下滑动的。

    var x,y;
    window.onload = function(){
        document.getElementById("div").addEventListener("touchstart",function(e){
 
            x= e.pageX;y= e.pageY;
        });
        document.getElementById("div").addEventListener("touchend",function(e){
 
            console.log(parseInt(e.pageY)-parseInt(y));
        });
    }
如果是向下滑动的话我们就写个方法把上面的头部搜索给展示下来。
本文由免费oa系统 78oa原创,转载请注明出处