html实现微信公众号,H5在微信公众号的下拉刷新实现

由于项目需要在微信公众号做“健康资讯”相关的，所以会用到下拉刷新，可是使用的原生H5做页面，不过希望能够做到和app原生一样的下拉刷新效果，然后在网上找了找H5下拉刷新相关的资料，具体有：Iscroll，MUI,Hook.js,dragloader 等，它们宣称都可以很好的解决下拉刷新的问题，但是我查看的具体的官网文档和例子后，我还是选择了Iscroll作为本次的下拉刷新实现，因为其它的技术要么文档写的不好，要么例子实现太少，而iscroll的例子却很多。

下面是我从项目里面把下拉刷新的模块扒出来的，把实现的效果分享一下

具体实现代码思路是：页面的列表展示通过后台返回的json数组，然后遍历json数组通过js添加列表。每次向下刷新后类似点击分页“下一页”，具体代码如下：

健康资讯

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%;

}

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 += "

"+

"

"

"+checker.title+"

"+

"

"+checker.subTitle+"

"+

"

";

});

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();

});

资讯列表