原生JS、CSS3上拉刷新效果的实现。_刷新的意思资源-CSDN文库

共6个文件

js：2个

jpg：2个

html：1个

上拉刷新

5星 · 超过95%的资源 36 浏览量 2017-12-21 16:16:49 上传评论收藏 70KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

pullRefresh.rar （6个子文件）

pullRefresh

pull-refresh.css 2KB

index.html 3KB

img

2.jpg 45KB

1.jpg 20KB

pull-refresh.min.js 3KB

pull-refresh.js 5KB

<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="x5-fullscreen" content="true"> <meta name="full-screen" content="yes"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="pull-refresh.css" rel="stylesheet" /> </head> <body> <div id="refreshBtn" style="position: absolute;top: 20px;z-index: 100;padding: 5px 25px 5px 25px;background: #00ff40;color: white;font-size: 16px;border-radius: 20px;font-weight: 600;left: 20px;box-shadow: 3px 4px 5px rgba(0,0,0,0.3);"> 刷新 </div>  <div class="pull-wrapper" style="border: 0px #00f solid;height: 100%;">  <div id="pull-components">  <div class="pull-wrapper-content"> <div class="box"> <div class="boxContext">美国承认耶路撒冷以首都特朗普政府为何如此”冒天下之火而不韪“</div> <img src="img/1.jpg" height="85%"/> </div> <div class="box"> <div class="boxContext">美国承认耶路撒冷以首都特朗普政府为何如此”冒天下之火而不韪“</div> <img src="img/2.jpg" height="85%"/> </div> <div class="box"> <div class="boxContext">美国承认耶路撒冷以首都特朗普政府为何如此”冒天下之火而不韪“</div> <img src="img/1.jpg" height="85%"/> </div> <div class="box"> <div class="boxContext">美国承认耶路撒冷以首都特朗普政府为何如此”冒天下之火而不韪“</div> <img src="img/2.jpg" height="85%"/> </div> <div class="box"> <div class="boxContext">美国承认耶路撒冷以首都特朗普政府为何如此”冒天下之火而不韪“</div> <img src="img/1.jpg" height="85%"/> </div> <div class="box"> <div class="boxContext">美国承认耶路撒冷以首都特朗普政府为何如此”冒天下之火而不韪“</div> <img src="img/2.jpg" height="85%"/> </div> <div class="box"> <div class="boxContext">美国承认耶路撒冷以首都特朗普政府为何如此”冒天下之火而不韪“</div> <img src="img/1.jpg" height="85%"/> </div> <div class="box"> <div class="boxContext">美国承认耶路撒冷以首都特朗普政府为何如此”冒天下之火而不韪“</div> <img src="img/2.jpg" height="85%"/> </div> </div>  <div id="pullMessage"> 上拉显示20条数据 </div> </div> </div> </body> <script src="pull-refresh.min.js" type="text/javascript"></script> <script type="text/javascript"> document.getElementById("refreshBtn").onclick = function() { location.reload(); } upper_pull({ container:'pull-components', operation:function(e) { var that = this; setTimeout(function() { var fragment = document.createDocumentFragment(); for(var i = 0;i<3;i++) { var box = document.createElement('div'); box.setAttribute('class','box'); var appendDom = '<div class="boxContext">美国承认耶路撒冷以首都特朗普政府为何如此”冒天下之火而不韪“</div><img src="img/'+((i)%2 == 0 ? 1 : 2)+'.jpg" height="85%"/>'; box.innerHTML = appendDom; fragment.appendChild(box); } document.querySelector('.pull-wrapper-content').appendChild(fragment); that.back(); },1000); } }); </script> </html>

评论收藏

内容反馈