欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-03 12:10:10
由于项目需要在微信公众号做“健康资讯”相关的,所以会用到下拉刷新,可是使用的原生H5做页面,不过希望能够做到和app原生一样的下拉刷新效果,然后在网上找了找...

由于项目需要在微信公众号做“健康资讯”相关的,所以会用到下拉刷新,可是使用的原生H5做页面,不过希望能够做到和app原生一样的下拉刷新效果,然后在网上找了找H5下拉刷新相关的资料,具体有:Iscroll,MUI,Hook.js,dragloader 等,它们宣称都可以很好的解决下拉刷新的问题,但是我查看的具体的官网文档和例子后,我还是选择了Iscroll作为本次的下拉刷新实现,因为其它的技术要么文档写的不好,要么例子实现太少,而iscroll的例子却很多。
下面是我从项目里面把下拉刷新的模块扒出来的,把实现的效果分享一下
H5在微信公众号的下拉刷新实现
具体实现代码思路是:页面的列表展示通过后台返回的json数组,然后遍历json数组通过js添加列表。每次向下刷新后类似点击分页“下一页”,具体代码如下:
 

<!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 += "<p 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></p>";
                      });

                   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>
    <p class="cm-container-box" id="wrapper">
        <p class="cm-table"  id="scroller">
            <p class="m-img-font-box" id="thelist">

            </p>

                <p id="pullUp" style="display:none; text-align: center;">
                    <span class="pullUpLabel"></span>
                </p>

            </p>
    </p>


</body>
</html>

 

上一篇:

下一篇: