原生js下拉刷新

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

代码如下:

html


 
     
    
test
 
 
 
  
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 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) = -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下拉刷新)