H5在微信公众号的下拉刷新实现
2015-12-25 11:23
1246 查看
由于项目需要在微信公众号做“健康资讯”相关的,所以会用到下拉刷新,可是使用的原生H5做页面,不过希望能够做到和app原生一样的下拉刷新效果,然后在网上找了找H5下拉刷新相关的资料,具体有:Iscroll,MUI,Hook.js,dragloader 等,它们宣称都可以很好的解决下拉刷新的问题,但是我查看的具体的官网文档和例子后,我还是选择了Iscroll作为本次的下拉刷新实现,因为其它的技术要么文档写的不好,要么例子实现太少,而iscroll的例子却很多。
下面是我从项目里面把下拉刷新的模块扒出来的,把实现的效果分享一下
具体实现代码思路是:页面的列表展示通过后台返回的json数组,然后遍历json数组通过js添加列表。每次向下刷新后类似点击分页“下一页”,具体代码如下:
完整demo下载地址:http://download.csdn.net/download/zl544434558/9376562
下面是我从项目里面把下拉刷新的模块扒出来的,把实现的效果分享一下
具体实现代码思路是:页面的列表展示通过后台返回的json数组,然后遍历json数组通过js添加列表。每次向下刷新后类似点击分页“下一页”,具体代码如下:
[code]<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>健康资讯</title> <script src="jquery.min.js"/></script> <script type="text/javascript" src="iscroll.js"></script> <link rel="stylesheet" type="text/css" href="bookBase.css" /> <!--start--> <style> html, body{ background-color: #fff;} .m-img-font-box{} .m-img-font-box a.link{ display: block; border-bottom: 1px solid #ccc;} .m-img-font-box a.link dl{ padding: 5px 10px; height: 50px; overflow: hidden;} .m-img-font-box a.link dl dt{ width: 60px; height: 60px; float: left;} .m-img-font-box a.link dl dt img{ width: 100%; height: 82%;} .m-img-font-box a.link dl dd{ margin-left: 65px; padding-top: 1px;} .m-img-font-box a.link dl dd p{ font-size: 16px; color: #bbb;} .m-img-font-box a.link dl dd p.title{ font-size: 16px; color: #464646; width: 91%; overflow: hidden; text-overflow:ellipsis; white-space:nowrap;} .m-img-font-box a.link dl dd p.font{ width: 98%; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 14px;} h3{ font-size: 13px; font-weight: normal; padding: 5px 10px;} #wrapper { position:absolute; z-index:1; top:30px; bottom:0; left:-9999px; width:100%; background:#FFF; overflow:auto; } #scroller { position:absolute; z-index:1; -webkit-tap-highlight-color:rgba(0,0,0,0); width:100%; padding:0; } #pullUp { background:#fff; height:40px; line-height:40px; padding:5px 10px; border-bottom:1px solid #ccc; font-weight:bold; font-size:14px; color:#888; } #pullUp.loading .pullUpLabel { background:url(../images/loading/loading.gif) no-repeat center 0; width: 100%; height: 30px; align:center; background-size: auto 100%; } </style> <script type="text/javascript"> var myScroll, pullUpEl, pullUpOffset, generatedCount = 0; var currenPage = 0; var pageSize = 3; function pullUpAction () { currenPage ++; var elInit = $("#thelist"); var param = {"currentPage":currenPage,"pageSize":pageSize}; $.ajax({ url:"result.json", //后台处理程序 type:'post', //数据发送方式 dataType: 'json', data:param, async: true, success:function(data){ var result = "" ; $(data).each(function(){ var checker = $(this)[0]; result += "<div class='mfb'><a class='link' href='"+checker.url+"'>"+ "<dl><dt><img src='"+checker.icon+"'/> </dt>"+ "<dd><p class='title'>"+checker.title+"</p>"+ "<p class='title'>"+checker.subTitle+"</p>"+ "</dd></dl></a></div>"; }); elInit.append(result); myScroll.refresh(); } }); } function loaded() { pullUpEl = document.getElementById('pullUp'); if(pullUpEl != null){ pullUpOffset = pullUpEl.offsetHeight; }else{ pullUpOffset = 0; } myScroll = new iScroll('wrapper', { useTransition: true, onRefresh: function () { if (pullUpEl.className.match('loading')) { pullUpEl.className = ''; $(pullUpEl).css("display", "none"); pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...'; } }, onScrollMove: function () { if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) { pullUpEl.className = 'flip'; $(pullUpEl).css("display",""); pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开载入更多..'; this.maxScrollY = this.maxScrollY; } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...'; this.maxScrollY = pullUpOffset; } }, onScrollEnd: function () { if (pullUpEl.className.match('flip')) { pullUpEl.className = 'loading'; $(pullUpEl).css("display",""); pullUpEl.querySelector('.pullUpLabel').innerHTML = ''; pullUpAction(); // Execute custom function (ajax call?) } } }); document.getElementById('wrapper').style.left = '0'; } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); //页面加载完成后,向后台请求数据 $(function(){ pullUpAction(); }); </script> </style> </head> <body> <h3>资讯列表</h3> <div class="cm-container-box" id="wrapper"> <div class="cm-table" id="scroller"> <div class="m-img-font-box" id="thelist"> </div> <div id="pullUp" style="display:none; text-align: center;"> <span class="pullUpLabel"></span> </div> </div> </div> </body> </html>
完整demo下载地址:http://download.csdn.net/download/zl544434558/9376562
相关文章推荐
- Android 微信支付返回xml转换成map格式
- 微信公 众平台开发,用于个人技术交流,有兴趣的加QQ群432921500
- 微信编辑器——构思编辑器教你如何学好图文排版
- 仿UC天气下拉和微信下拉眼睛头部淡入淡出--第三方开源--PullLayout
- PHP用抛物线的模型实现微信红包生成算法的程序源码
- 高仿微信对话列表滑动删除效果
- C#-MVC开发微信应用(2)--微信消息的处理和应答
- 【php应用】微信支付小结
- 微信公众号开发系列-获取微信OpenID
- 微信公共平台php收不到信息解决方法
- 微信公众平台通用接口API指南
- iOS微信支付[WXApi sendReq:req]调用小技巧
- C#-MVC开发微信应用(1)--开始使用微信接口
- 微信编辑器—构思编辑器元旦圣诞排版素材
- 微信 ua
- php创建微信二维码40052错误提示
- 微信支付接口 H5
- 微信被动回复用户消息功能——关注、取消
- 监听文本框数据修改,特别是微信等客户端直接选择粘贴修改
- [微信] 微信网页版扫码登录的实现