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