原生js下拉刷新

首先声明一点就是写的不怎么好，比较败笔。不过功能和样子是按照插件的形式做的，有些地方通过什么样子可以优化，欢迎大家指教。

代码如下：

html

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>test</title>
<style type="text/css" media="screen">
    body{margin: 0;padding:0;}
    .scroller .loading{
        height: 60px;
        line-height: 60px;
        text-align: center;
        width: 100%;
        background-color: #f1f1f1;
    }
    .scroller{
        -webkit-overflow-scrolling:touch;
        background-color:#f0f;
        height:700px;
    }
</style> 
</head> 
<body > 
  <div style="width:100%;height:100px;background-color:#ff0;position:relative;z-index:1;"></div>
<div id="container" class="scroller" >
  <div id="load1" class="loading">
  </div>
</div>
<body>
<script type="text/javascript" src="./scroll.js"></script>
<script type="text/javascript">
  //调用scroll
  var scroll = new Pull().init({
    barHeight : '-60',
    startText : '下拉加载数据',
    loadText : '加载中。。。',
    box : u.$('#container'),
    bar : u.$('#load1'),
    loadCallBack : function(){
      var myBox = this.box,
          myBar = this.bar;
      setTimeout(function(){
        u.html(myBar,'加载完毕');
        u.css(myBox,{
          transition : 'all 1s',
          transform : 'translate3d(0px, -60px, 0px)',
        });
      },2000)
    }
  })
</script>
</html>

js代码如下

/**
 * @name Pull-refresh
 * @version v0.1
 * @time 2016/09/20
 * @author james
 *
 */
;!function(window,undefined){

  var pullUtil = u = (function(){
    var _this = this,
        _doc = document,
        _element,
        eles = [];

    function getEle(){
      var ele = arguments[0],
          eleLength = ele.length;

      if(ele !== undefined){

        if(!ele.indexOf('#')){

          return _doc.getElementById( ele.substring(1,eleLength) );

        }else if(!ele.indexOf('.')){

          _element = document.getElementsByTagName('*');

          for(var i = 0, l = _element.length;i < l; i++){

            if(_element[i].className == ele.substring(1,eleLength)){
              eles.push( _element[i] );
            };
          };
          return eles;

        }else{
          return _doc.getElementsByTagName( ele );
        }
      }else{
        return _this;
      }
  
    };

    function addEvent(){
      var arg0 = arguments[0],
          arg1 = arguments[1],
          arg2 = arguments[2];

      if (arg0.addEventListener) {
        arg0.addEventListener(arg1, arg2, false);

      }else if(arg0.attachEvent) {
        arg0.attachEvent('on' + arg1, arg2);

      }else{
        arg0['on' + arg1] = arg2;
      }
    };

    function setStyle(){
      var arg0 = arguments[0],
          arg1 = arguments[1],
          keys = [],
          values = [];
      if(typeof arg1 === 'object'){
        for(var param in arg1){
          keys.push(param);
          values.push(arg1[param]);
        }
        for(var i=0,l=keys.length;i<l;i++){
          arg0.style[keys[i]] = values[i];
        }
      }
      return _this;
    };

    function setBox(){
      var arg0 = arguments[0],
          arg1 = arguments[1];
      arg0.innerHTML = arg1;

      return _this;
    };

    return{
      $ : getEle,
      addE : addEvent,
      css : setStyle,
      html : setBox,
    }
  })();

  function Pull(){
    _this = this;
  };

  Pull.prototype = {
    init : function(obj){

      var obj = obj || {},
          $container = obj.box,
          $load1 = obj.bar,
          startPosition,
          endPosition,
          buffDistance;
      u.css($container,{transform:'translate3d(0px,'+obj.barHeight+'px, 0px)'});

      u.addE($container,'touchstart',function(e){
        buffDistance = 0;
        u.html($load1,obj.startText);
        u.css($container,{transition:'all 0s'});
        startPosition = e.touches[0].pageY;     
      });

      u.addE($container,'touchmove',function(e){
        e.preventDefault();
        endPosition = e.touches[0].pageY;
        buffDistance= endPosition-startPosition+parseInt(obj.barHeight);

        if(buffDistance > parseInt(obj.barHeight)){
         u.css($container,{
            transition : 'all 0s',
            transform : 'translate3d(0px, '+buffDistance+'px, 0px)',
          });
        }else{
          return;
        }
      });

      u.addE($container,'touchend',function(e){
        if(parseInt(obj.barHeight) <buffDistance< -parseInt(obj.barHeight)){
          u.css($container,{
            transition : 'all 0.5s',
            transform : 'translate3d(0px, '+obj.barHeight+'px, 0px)',
          });
       }
        if(buffDistance >= -parseInt(obj.barHeight)){ 
          u.html($load1,obj.loadText);
          u.css($container,{
            transition : 'all 1s',
            transform : 'translate3d(0px,0px, 0px)',
          });
          obj.loadCallBack&&obj.loadCallBack();
        }
      });           
    },
  };

  window.Pull = Pull;
  window.u = u;
}(window);

其实这个移动端下拉刷新也就是css的transform配合touch事件来完成的。写的不好的地方希望大家能给予指教～～

原生js下拉刷新

代码如下：

html

js代码如下

推荐阅读更多精彩内容