html5实现下拉刷新，上拉加载

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量5.8k 收藏 4
点赞数
分类专栏： 前端 文章标签： javascript 前端开发 html jquery css
html5代码
运行代码
view source print ?
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
005 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
006 <meta name="apple-mobile-web-app-capable" content="yes">
007 <meta name="apple-mobile-web-app-status-bar-style" content="black">
008 <title>html5+css3实现上拉和下拉刷新</title>
009  
010 <script type="text/javascript"src="http://statics.webkfa.com/js/iscroll.js"></script>
011  
012 <script type="text/javascript">
013  
014 var myScroll,
015     pullDownEl, pullDownOffset,
016     pullUpEl, pullUpOffset,
017     generatedCount = 0;
018  
019 function pullDownAction () {
020     setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
021         var el, li, i;
022         el = document.getElementById('thelist');
023  
024         for (i=0; i<3; i++) {
025             li = document.createElement('li');
026             li.innerText = 'Generated row ' + (++generatedCount);
027             el.insertBefore(li, el.childNodes[0]);
028         }
029          
030         myScroll.refresh();     // Remember to refresh when contents are loaded (ie: on ajax completion)
031     }, 1000);   // <-- Simulate network congestion, remove setTimeout from production!
032 }
033  
034 function pullUpAction () {
035     setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
036         var el, li, i;
037         el = document.getElementById('thelist');
038  
039         for (i=0; i<3; i++) {
040             li = document.createElement('li');
041             li.innerText = 'Generated row ' + (++generatedCount);
042             el.appendChild(li, el.childNodes[0]);
043         }
044          
045         myScroll.refresh();     // Remember to refresh when contents are loaded (ie: on ajax completion)
046     }, 1000);   // <-- Simulate network congestion, remove setTimeout from production!
047 }
048  
049 function loaded() {
050     pullDownEl = document.getElementById('pullDown');
051     pullDownOffset = pullDownEl.offsetHeight;
052     pullUpEl = document.getElementById('pullUp');  
053     pullUpOffset = pullUpEl.offsetHeight;
054      
055     myScroll = new iScroll('wrapper', {
056         useTransition: true,
057         topOffset: pullDownOffset,
058         onRefresh: function () {
059             if (pullDownEl.className.match('loading')) {
060                 pullDownEl.className = '';
061                 pullDownEl.querySelector('.pullDownLabel').innerHTML ='Pull down to refresh...';
062             } else if (pullUpEl.className.match('loading')) {
063                 pullUpEl.className = '';
064                 pullUpEl.querySelector('.pullUpLabel').innerHTML ='Pull up to load more...';
065             }
066         },
067         onScrollMove: function () {
068             if (this.y > 5 && !pullDownEl.className.match('flip')) {
069                 pullDownEl.className = 'flip';
070                 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
071                 this.minScrollY = 0;
072             } else if (this.y < 5 && pullDownEl.className.match('flip')) {
073                 pullDownEl.className = '';
074                 pullDownEl.querySelector('.pullDownLabel').innerHTML ='Pull down to refresh...';
075                 this.minScrollY = -pullDownOffset;
076             } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
077                 pullUpEl.className = 'flip';
078                 pullUpEl.querySelector('.pullUpLabel').innerHTML ='Release to refresh...';
079                 this.maxScrollY = this.maxScrollY;
080             } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
081                 pullUpEl.className = '';
082                 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
083                 this.maxScrollY = pullUpOffset;
084             }
085         },
086         onScrollEnd: function () {
087             if (pullDownEl.className.match('flip')) {
088                 pullDownEl.className = 'loading';
089                 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';               
090                 pullDownAction();   // Execute custom function (ajax call?)
091             } else if (pullUpEl.className.match('flip')) {
092                 pullUpEl.className = 'loading';
093                 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';               
094                 pullUpAction(); // Execute custom function (ajax call?)
095             }
096         }
097     });
098      
099     setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
100 }
101  
102 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
103  
104 document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
105 </script>
106  
107 <style type="text/css" media="all">
108 body,ul,li {
109     padding:0;
110     margin:0;
111     border:0;
112 }
113  
114 body {
115     font-size:12px;
116     -webkit-user-select:none;
117     -webkit-text-size-adjust:none;
118     font-family:helvetica;
119 }
120  
121 #header {
122     position:absolute; z-index:2;
123     top:0; left:0;
124     width:100%;
125     height:45px;
126     line-height:45px;
127     background-color:#d51875;
128     background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
129     background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
130     background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
131     padding:0;
132     color:#eee;
133     font-size:20px;
134     text-align:center;
135 }
136  
137 #header a {
138     color:#f3f3f3;
139     text-decoration:none;
140     font-weight:bold;
141     text-shadow:0 -1px 0 rgba(0,0,0,0.5);
142 }
143  
144 #footer {
145     position:absolute; z-index:2;
146     bottom:0; left:0;
147     width:100%;
148     height:48px;
149     background-color:#222;
150     background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
151     background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
152     background-image:-o-linear-gradient(top, #999, #666 2%, #222);
153     padding:0;
154     border-top:1px solid #444;
155 }
156  
157 #wrapper {
158     position:absolute; z-index:1;
159     top:45px; bottom:48px; left:-9999px;
160     width:100%;
161     background:#aaa;
162     overflow:auto;
163 }
164  
165 #scroller {
166     position:absolute; z-index:1;
167 /*  -webkit-touch-callout:none;*/
168     -webkit-tap-highlight-color:rgba(0,0,0,0);
169     width:100%;
170     padding:0;
171 }
172  
173 #scroller ul {
174     list-style:none;
175     padding:0;
176     margin:0;
177     width:100%;
178     text-align:left;
179 }
180  
181 #scroller li {
182     padding:0 10px;
183     height:40px;
184     line-height:40px;
185     border-bottom:1px solid #ccc;
186     border-top:1px solid #fff;
187     background-color:#fafafa;
188     font-size:14px;
189 }
190  
191 #myFrame {
192     position:absolute;
193     top:0; left:0;
194 }
195  
196  
197  
198 /**
199  *
200  * Pull down styles
201  *
202  */
203 #pullDown, #pullUp {
204     background:#fff;
205     height:40px;
206     line-height:40px;
207     padding:5px 10px;
208     border-bottom:1px solid #ccc;
209     font-weight:bold;
210     font-size:14px;
211     color:#888;
212 }
213 #pullDown .pullDownIcon, #pullUp .pullUpIcon  {
214     display:block; float:left;
215     width:40px; height:40px;
216     background:url(http://statics.webkfa.com/img/pull-icon@2x.png) 0 0 no-repeat;
217     -webkit-background-size:40px 80px; background-size:40px 80px;
218     -webkit-transition-property:-webkit-transform;
219     -webkit-transition-duration:250ms; 
220 }
221 #pullDown .pullDownIcon {
222     -webkit-transform:rotate(0deg) translateZ(0);
223 }
224 #pullUp .pullUpIcon  {
225     -webkit-transform:rotate(-180deg) translateZ(0);
226 }
227  
228 #pullDown.flip .pullDownIcon {
229     -webkit-transform:rotate(-180deg) translateZ(0);
230 }
231  
232 #pullUp.flip .pullUpIcon {
233     -webkit-transform:rotate(0deg) translateZ(0);
234 }
235  
236 #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
237     background-position:0 100%;
238     -webkit-transform:rotate(0deg) translateZ(0);
239     -webkit-transition-duration:0ms;
240  
241     -webkit-animation-name:loading;
242     -webkit-animation-duration:2s;
243     -webkit-animation-iteration-count:infinite;
244     -webkit-animation-timing-function:linear;
245 }
246  
247 @-webkit-keyframes loading {
248     from { -webkit-transform:rotate(0deg) translateZ(0); }
249     to { -webkit-transform:rotate(360deg) translateZ(0); }
250 }
251  
252 </style>
253 </head>
254 <body>
255  
256 <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
257 <div id="wrapper">
258     <div id="scroller">
259         <div id="pullDown">
260             <span class="pullDownIcon"></span><spanclass="pullDownLabel">Pull down to refresh...</span>
261         </div>
262  
263         <ul id="thelist">
264             <li>Pretty row 1</li>
265             <li>Pretty row 2</li>
266             <li>Pretty row 3</li>
267             <li>Pretty row 4</li>
268             <li>Pretty row 5</li>
269             <li>Pretty row 6</li>
270             <li>Pretty row 7</li>
271             <li>Pretty row 8</li>
272             <li>Pretty row 9</li>
273             <li>Pretty row 10</li>
274             <li>Pretty row 11</li>
275             <li>Pretty row 12</li>
276             <li>Pretty row 13</li>
277             <li>Pretty row 14</li>
278             <li>Pretty row 15</li>
279             <li>Pretty row 16</li>
280             <li>Pretty row 17</li>
281             <li>Pretty row 18</li>
282             <li>Pretty row 19</li>
283             <li>Pretty row 20</li>
284             <li>Pretty row 21</li>
285             <li>Pretty row 22</li>
286             <li>Pretty row 23</li>
287             <li>Pretty row 24</li>
288             <li>Pretty row 25</li>
289             <li>Pretty row 26</li>
290             <li>Pretty row 27</li>
291             <li>Pretty row 28</li>
292             <li>Pretty row 29</li>
293             <li>Pretty row 30</li>
294             <li>Pretty row 31</li>
295             <li>Pretty row 32</li>
296             <li>Pretty row 33</li>
297             <li>Pretty row 34</li>
298             <li>Pretty row 35</li>
299             <li>Pretty row 36</li>
300             <li>Pretty row 37</li>
301             <li>Pretty row 38</li>
302             <li>Pretty row 39</li>
303             <li>Pretty row 40</li>
304         </ul>
305         <div id="pullUp">
306             <span class="pullUpIcon"></span><spanclass="pullUpLabel">Pull up to refresh...</span>
307         </div>
308     </div>
309 </div>
310 <div id="footer"></div>
311  
312 </body>
313 </html>
喯啵儿灞
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5基于iScroll实现下拉刷新和上拉加载更多
08-29
主要为大家详细介绍了H5基于iScroll实现下拉刷新和上拉加载更多效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery实现上拉加载下拉刷新
Candy_mi的博客
02-25 3055
引入dropload插件   需要引入的文件 &lt;script src="js/zepto.min.js"&gt;&lt;/script&gt; &lt;script src="js/dist/dropload.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="js/dist/dropload
h5移动端下拉刷新，上拉加载
qq_42413917的博客
09-23 1818
h5移动端下拉刷新，上拉加载一、下拉刷新二、上拉加载 一、下拉刷新 代码如下（示例）： var servepage = 1;//当前页数 var totalpage = 0;//总页数 需要自行查询赋值 var isload = false; var pageY = null, endY = null; dropDownLoad() $(window).scroll(function () { if (!document.documentElement.scrollTop) {
H5下拉刷新功能实现攻略！
weixin_64051447的博客
03-13 1069
本文讲解了下拉的原理、并根据原理写出初始代码。在初始代码的基础上，我解决了 6 个缺陷、做了 2 个优化，实现了一个完善的下拉刷新效果。
html上拉下拉查看文字内容,html5上拉下拉事件效果演示
weixin_35510737的博客
06-03 557
一，下拉事件html5下拉事件简单实例html5下拉事件简单实例未触发事件！//全局变量，触摸开始位置var startX = 0, startY = 0;//touchstart事件function touchSatrtFunc(evt) {try{evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等var touch = evt.touches[0]; //获取...
html5上拉下拉刷新分页实现
热门推荐
胡杰的专栏
07-23 1万+
html5上拉下拉刷新分页实现 h5页面上用到的上拉下拉翻页刷新数据，兼容性还行，有一个不大满意的地方在上拉下拉滚屏的时候有时会闪屏(闪一下，跳到原来的位置，而不是最新拉到的位置)，如果这个问题能解决，这个方案就比较完美。 直接上html5页面源码和用到的 isscroll.js,如果有人解决了闪屏的问题请告诉我一下，不胜感激，本人js比较菜。
如何实现上拉加载，下拉刷新？
路人贾！
01-10 451
如何实现上拉加载，下拉刷新？
H5下拉刷新和上拉加载
Giraffe0615的博客
11-24 4431
在移动端H5网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如iscroll，pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。
H5如何做页面下拉刷新和上拉加载
weixin_53818172的博客
09-01 1738
【代码】H5如何做页面下拉刷新和上拉加载。
H5 vant下拉刷新&上拉加载
weixin_46122878的博客
10-25 983
H5 vant下拉刷新&上拉加载
移动端h5webapp简易的上拉加载下拉刷新
08-11
移动端，h5/webapp, 简易的上拉加载，下拉刷新
基于HTML5上使用iScroll实现下拉刷新，上拉加载更多
09-02
本文主要介绍在HTML5中使用iScroll实现下拉刷新，上拉加载更多数据的方法，主要就是写了两个自定义函数pullDownAction和pullUpAction，分别在下拉和上拉的事件中调用他们。
html5、移动端、微信公众号、手机网址上拉加载、下拉刷新比较好用且比较完善的插件，完全适用于移动端所有浏览器html页面下拉刷
06-10
html5、移动端、微信公众号、手机网址上拉加载、下拉刷新比较好用且比较完善的插件，完全适用于移动端所有浏览器html页面下拉刷新
MUI选项卡下拉刷新上拉加载demo
12-10
这是一个基于mui框架下实现的一个上拉刷新，下拉加载的一个数据加载demo这样的做法是为了提高用户的体验感，减少服务器的压力~
html5下拉刷新上拉加载
02-27
手机html5页面下拉刷新上拉加载数据工具类
Ionic如何实现下拉刷新与上拉加载功能
01-19
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发...本文给大家介绍 Ioinc中怎么实现 下拉刷新和上拉加载功能的。在项目开发中经常遇到此功能，感
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 496
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
element-ui的bug记录
nick_zhang的博客
04-29 386
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
uniapp 怎么实现下拉刷新上拉加载
03-25
A：在uni-app中，可以通过在组件上绑定相关事件来实现下拉刷新和上拉加载的功能。常用的组件包括`<scroll-view>`、`<list>`、`<recycle-list>`等。 1. 下拉刷新：使用`<scroll-view>`组件，并绑定其下拉刷新事件。示例如下： ```html <scroll-view refresher-enabled refresher-threshold="45" @refresherrefresh="onRefresh"> <view class="list-item" v-for="(item, index) in items" :key="index">{{ item }}</view> </scroll-view> ``` 其中，`refresher-enabled`表示启用下拉刷新功能，`refresher-threshold`表示下拉刷新的临界值（单位是px），`@refresherrefresh`表示下拉刷新事件，`onRefresh`为下拉刷新的回调函数。 2. 上拉加载：使用`<list>`或`<recycle-list>`组件，并绑定其触底事件。示例如下： ```html <list :data="items" @scrolltolower="onLoadMore"> <view class="list-item" slot-scope="{ item }">{{ item }}</view> </list> ``` 其中，`<list>`或`<recycle-list>`组件用于展示列表数据，`:data`属性为列表数据源，`@scrolltolower`表示触底事件，`onLoadMore`为上拉加载的回调函数。 以上就是uni-app中实现下拉刷新和上拉加载的方法。具体实现可以根据自己的需求来定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值