原生app里的数据列表都会使用下拉刷新的效果，在webapp里可以采用iscroll、swiper等插件或框架实现，那么如何自己编码实现类似的效果呢，下面介绍使用原生js+css3实现的简单效果。

html布局

  
      
       
    
     
         下拉刷新数据
     
     
    
      
列表数据1
    
      
列表数据2
    
      
列表数据3
    
      
列表数据4
    
      
列表数据5
    
      
列表数据6
    
      
列表数据7
    
      
列表数据8
    
      
列表数据9
    
      
列表数据10
    
      
列表数据11
    
      
列表数据12
    
      
列表数据13
    
      
列表数据14
    
      
列表数据15
    
      
列表数据16
    
      
列表数据17
    
      
列表数据18
    
      
列表数据19
    
      
列表数据20
    
      
列表数据21
    
      
列表数据22
    
      
列表数据23
    
      
列表数据24
    
      
列表数据25
    
      
列表数据26
    
      
列表数据27
    
      
列表数据28
    
      
列表数据29
    
      
列表数据30
     
 
    

js逻辑

var slide = function (option) {    var defaults={        container:'',        next:function(){}    }    var start,            end,            length,            isLock = false,//是否锁定整个操作            isCanDo = false,//是否移动滑块            isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),            hasTouch = 'ontouchstart' in window && !isTouchPad;    var obj = document.querySelector(option.container);    var loading=obj.firstElementChild;    var offset=loading.clientHeight;    var objparent = obj.parentElement;    /*操作方法*/    var fn =    {        //移动容器        translate: function (diff) {            obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';            obj.style.transform='translate3d(0,'+diff+'px,0)';        },        //设置效果时间        setTransition: function (time) {            obj.style.webkitTransition='all '+time+'s';            obj.style.transition='all '+time+'s';        },        //返回到初始位置        back: function () {            fn.translate(0 - offset);            //标识操作完成            isLock = false;        },        addEvent:function(element,event_name,event_fn){            if (element.addEventListener) {                element.addEventListener(event_name, event_fn, false);            } else if (element.attachEvent) {                element.attachEvent('on' + event_name, event_fn);            } else {                element['on' + event_name] = event_fn;            }        }    };    fn.translate(0-offset);    fn.addEvent(obj,'touchstart',start);    fn.addEvent(obj,'touchmove',move);    fn.addEvent(obj,'touchend',end);    fn.addEvent(obj,'mousedown',start)    fn.addEvent(obj,'mousemove',move)    fn.addEvent(obj,'mouseup',end)    //滑动开始    function start(e) {        if (objparent.scrollTop <= 0 && !isLock) {            var even = typeof event == "undefined" ? e : event;            //标识操作进行中            isLock = true;            isCanDo = true;            //保存当前鼠标Y坐标            start = hasTouch ? even.touches[0].pageY : even.pageY;            //消除滑块动画时间            fn.setTransition(0);            loading.innerHTML='下拉刷新数据';        }        return false;    }    //滑动中    function move(e) {        if (objparent.scrollTop <= 0 && isCanDo) {            var even = typeof event == "undefined" ? e : event;            //保存当前鼠标Y坐标            end = hasTouch ? even.touches[0].pageY : even.pageY;            if (start < end) {                even.preventDefault();                //消除滑块动画时间                fn.setTransition(0);                //移动滑块                if((end-start-offset)/2<=150) {                    length=(end - start - offset) / 2;                    fn.translate(length);                }                else {                    length+=0.3;                    fn.translate(length);                }            }        }    }    //滑动结束    function end(e) {        if (isCanDo) {            isCanDo = false;            //判断滑动距离是否大于等于指定值            if (end - start >= offset) {                //设置滑块回弹时间                fn.setTransition(1);                //保留提示部分                fn.translate(0);                //执行回调函数                loading.innerHTML='正在刷新数据';                if (typeof option.next == "function") {                    option.next.call(fn, e);                }            } else {                //返回初始状态                fn.back();            }        }    }}slide({container:"#container",next: function (e) {    //松手之后执行逻辑,ajax请求数据，数据返回后隐藏加载中提示    var that = this;    setTimeout(function () {        that.back.call();    }, 2000);}});

代码不是很多，细节还需完善。此次的学习结果是参考这篇文章完成