pullToRefresh.js
5.37 KB
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
//author wallace 华dee
//2015 7 3
//qq447363121陈国华
var refresher = {
info:{
"pullDownLable":"Pull down to refresh...",
"pullingDownLable":"Release to refresh...",
"pullUpLable":"Pull up to load more...",
"pullingUpLable":"Release to load more...",
"loadingLable":"Loading..."},
init:function(parameter){
var wrapper=document.getElementById(parameter.id);
var div=document.createElement("div");
div.id="scroller";
wrapper.appendChild(div);
var scroller=document.getElementById("scroller");
var list=document.querySelector("#"+parameter.id+" ul")
scroller.insertBefore(list,scroller.childNodes[0]);
var pullDown=document.createElement("div");
pullDown.id="pullDown";
var loader=document.createElement("div");
loader.className="loader";
for(var i=0;i<4;i++){
var span=document.createElement("span");
loader.appendChild(span);
}
pullDown.appendChild(loader);
var pullDownLabel=document.createElement("div");
pullDownLabel.className="pullDownLabel";
pullDown.appendChild(pullDownLabel);
scroller.insertBefore(pullDown,scroller.childNodes[0]);
var pullUp=document.createElement("div");
pullUp.id="pullUp";
var loader=document.createElement("div");
loader.className="loader";
for(var i=0;i<4;i++){
var span=document.createElement("span");
loader.appendChild(span);
}
pullUp.appendChild(loader);
var pullUpLabel=document.createElement("div");
pullUpLabel.className="pullUpLabel";
var content=document.createTextNode(refresher.info.pullUpLable);
pullUpLabel.appendChild(content);
pullUp.appendChild(pullUpLabel);
scroller.appendChild(pullUp);
//create dom above
//create dom ,you can wirte it yourself
var pullDownEl = document.getElementById('pullDown');
var pullDownOffset = pullDownEl.offsetHeight;
var pullUpEl = document.getElementById('pullUp');
var pullUpOffset =pullUpEl.offsetHeight;
//parameter
this.scrollIt(parameter,pullDownEl,pullDownOffset,pullUpEl,pullUpOffset);
},
scrollIt:function(parameter,pullDownEl,pullDownOffset,pullUpEl, pullUpOffset){
myScroll = new iScroll(parameter.id, {
useTransition: true,
vScrollbar: false, //hide the iscroll v bar
topOffset: pullDownOffset,
onRefresh: function () {
refresher.onRelease(pullDownEl,pullUpEl);
},
onScrollMove: function () {
refresher.onScrolling(this,pullDownEl,pullUpEl,pullUpOffset);//element
},
onScrollEnd: function () {
refresher.onPulling(pullDownEl,parameter.pullDownAction,pullUpEl,parameter.pullUpAction);
},
});
setTimeout(function(){pullDownEl.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable},300);
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
},
//things loader css on scrolling,you can wirte it yourself
onScrolling:function(e,pullDownEl,pullUpEl,pullUpOffset){
if (e.y>-(pullUpOffset)) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;
e.minScrollY =-pullUpOffset;
}
if (e.y > 0) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = refresher.info.pullingDownLable;
e.minScrollY = 0;
}
if ( e.scrollerH < e.wrapperH && e.y < (e.minScrollY-pullUpOffset) || e.scrollerH > e.wrapperH && e.y< (e.maxScrollY - pullUpOffset) ) {
document.getElementById("pullUp").style.display="block";
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML =refresher.info.pullingUpLable;
}
if (e.scrollerH < e.wrapperH && e.y > (e.minScrollY-pullUpOffset) && pullUpEl.className.match('flip') || e.scrollerH > e.wrapperH && e.y > (e.maxScrollY - pullUpOffset) && pullUpEl.className.match('flip')) {
document.getElementById("pullUp").style.display="none";
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = refresher.info.pullUpLable;
}
},
//things loader css on release,you can wirte it yourself
onRelease:function (pullDownEl,pullUpEl){
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;
pullDownEl.querySelector('.loader').style.display="none"
pullDownEl.style.lineHeight=pullDownEl.offsetHeight+"px";
}
if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML =refresher.info.pullUpLable;
pullUpEl.querySelector('.loader').style.display="none"
pullUpEl.style.lineHeight=pullDownEl.offsetHeight+"px";
}
},
//things loader css on pulling,you can wirte it yourself
onPulling:function (pullDownEl,pullDownAction,pullUpEl,pullUpAction){
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML =refresher.info.loadingLable;
pullDownEl.querySelector('.loader').style.display="block"
pullDownEl.style.lineHeight="20px";
if (pullDownAction)
pullDownAction(); // Execute custom function (ajax call?)
}
if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = refresher.info.loadingLable;
pullUpEl.querySelector('.loader').style.display="block"
pullUpEl.style.lineHeight="20px";
if (pullDownAction)
pullUpAction(); // Execute custom function (ajax call?)
}
}
}