The data list in the native app will be refreshed using the pull-down effect. In the webapp, you can use iscroll, swiper and other plug-ins or frameworks to implement it. So how to code and achieve similar effects by yourself? The following is a simple effect implemented using native js+css3.
html layout
<!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;}
ul{list-style: none;padding: 0;}
li{height: 30px;border-bottom: 1px solid #ddd;line-height: 30px;padding-left: 10px;}
.scroller .loading{height: 60px;line-height: 60px;text-align: center;width: 100%;background-color: #f1f1f1;}
.scroller{-webkit-overflow-scrolling:touch;}
</style>
</head>
<body >
<div class="scroller" >
<div class="loading">
Pull down to refresh the data
</div>
<ul>
<li><a href="#">List Data 1</a></li> <li><a href="#">List Data 2</a></li> <li><a href="#">List Data 3</a></li> <li><a href="#">List Data 4</a></li> <li><a href="#">List Data 5</a></li> <li><a href="#">List Data 6</a></li> <li><a href="#">List Data 7</a></li> <li><a href="#">List Data 8</a></li> <li><a href="#">List Data 9</a></li> <li><a href="#">List Data 10</a></li> <li><a href="#">List Data 11</a></li> <li><a href="#">List Data 12</a></li> <li><a href="#">List Data 13</a></li> <li><a href="#">List Data 14</a></li> <li><a href="#">List Data 15</a></li> <li><a href="#">List Data 16</a></li> <li><a href="#">List Data 17</a></li> <li><a href="#">List Data 18</a></li> <li><a href="#">List Data 19</a></li> <li><a href="#">List Data 20</a></li> <li><a href="#">List Data 21</a></li> <li><a href="#">List Data 22</a></li> <li><a href="#">List Data 23</a></li> <li><a href="#">List Data 24</a></li> <li><a href="#">List Data 25</a></li> <li><a href="#">List Data 26</a></li> <li><a href="#">List Data 27</a></li> <li><a href="#">List Data 28</a></li> <li><a href="#">List Data 29</a></li> <li><a href="#">List Data 30</a></li></ul>
</div>
<body>
</html>
js logic
var slide = function (option) {
var defaults={
container:'',
next:function(){}
}
var start,
end,
length,
isLock = false,// Whether to lock the entire operation isCanDo = false,//Whether to move the slider isTouchPad = (/hp-tablet/gi).test(),
hasTouch = 'ontouchstart' in window && !isTouchPad;
var obj = ();
var loading=;
var offset=;
var objparent = ;
/*Operation method*/
var fn =
{
//Move container translate: function (diff) {
='translate3d(0,'+diff+'px,0)';
='translate3d(0,'+diff+'px,0)';
},
//Set the effect time setTransition: function (time) {
='all '+time+'s';
='all '+time+'s';
},
//Return to the initial position back: function () {
(0 - offset);
//The identification operation is completed isLock = false;
},
addEvent:function(element,event_name,event_fn){
if () {
(event_name, event_fn, false);
} else if () {
('on' + event_name, event_fn);
} else {
element['on' + event_name] = event_fn;
}
}
};
(0-offset);
(obj,'touchstart',start);
(obj,'touchmove',move);
(obj,'touchend',end);
(obj,'mousedown',start)
(obj,'mousemove',move)
(obj,'mouseup',end)
//Slide starts function start(e) {
if ( <= 0 && !isLock) {
var even = typeof event == "undefined" ? e : event;
//The identification operation is in progress isLock = true;
isCanDo = true;
//Save the current mouse Y coordinate start = hasTouch ? [0].pageY : ;
//Eliminate slider animation time (0);
='Drag down to refresh the data';
}
return false;
}
//Sliding function move(e) {
if ( <= 0 && isCanDo) {
var even = typeof event == "undefined" ? e : event;
//Save the current mouse Y coordinate end = hasTouch ? [0].pageY : ;
if (start < end) {
();
//Eliminate slider animation time (0);
//Move the slider if((end-start-offset)/2<=150) {
length=(end - start - offset) / 2;
(length);
}
else {
length+=0.3;
(length);
}
}
}
}
//Sliding ends function end(e) {
if (isCanDo) {
isCanDo = false;
//Judge whether the sliding distance is greater than or equal to the specified value if (end - start >= offset) {
//Set the slider rebound time (1);
//Reserve the prompt part (0);
//Execute the callback function ='Refreshing data';
if (typeof == "function") {
(fn, e);
}
} else {
//Return to the initial state ();
}
}
}
}
slide({container:"#container",next: function (e) {
// After letting go, execute the logic, ajax requests data, hides the loading prompt after the data is returned var that = this;
setTimeout(function () {
();
}, 2000);
}});
There is not a lot of code, and the details need to be improved.