首先声明一点就是写的不怎么好,比较败笔。不过功能和样子是按照插件的形式做的,有些地方通过什么样子可以优化,欢迎大家指教。
代码如下:
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事件来完成的。写的不好的地方希望大家能给予指教~~