H5上拉刷新-下拉加载

上拉刷新-下拉加载 dom样式要求：

　　刷新与加载什么时候触发？根据的是滚动区域的顶部和底部 与 外部盒子的顶部和底部距离判断的；

　　外部盒子不能动，那么就要定外部盒子的高度了（100%），外部盒子高度等于屏幕的高度。

依赖：jquery-2.1.4.js/iscroll.js/pullToRefresh.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, minimum-scale = 1.0, user-scalable = no">
        <link rel="stylesheet" href="../src/css/reset.css">
        <link rel="stylesheet" href="../src/css/pullToRefresh.css">
    <script type="text/javascript" src="../src/js/pullToRefresh.js"></script>
    <script type="text/javascript" src="../src/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../src/js/iscroll.js"></script>
    
    <style>
    html,body{
        position: relative;
        width:100%;
        height: 100%;
        margin:0;
        padding:0;
    }
    #wrapper{
        position: relative;
        min-height:100%;
    }
    .dataimg{
        display: block;
        width:40%;
        margin:10% auto;
    }
    </style>
</head>
<body>
    
    <div id="wrapper">
  <ul>
    <li><img class="dataimg" src="../src/img/bank_ABC.png" alt=""></li>
    <li><img class="dataimg" src="../src/img/bank_BCM.png" alt=""></li>
    <li><img class="dataimg" src="../src/img/bank_BOC.png" alt=""></li>
  </ul>
</div>

<script>
refresher.init({
    id:"wrapper",
    pullDownAction:Refresh,                                                            
    pullUpAction:Load                                                                             
    });    
var data=['../src/img/bank_CCB.png','../src/img/bank_CIB.png','../src/img/bank_CMB.png']                                    
function Refresh() {                                                                
    setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
        var el, li, i;                                                                        
        el =document.querySelector("#wrapper ul");                    
        //这里写你的刷新代码            
        el.innerHTML = '';
        for (i=0; i<data.length; i++) {
                li = document.createElement('li');
                li.innerHTML='<img class="dataimg" src="'+data[i]+'" alt="" />'
                el.appendChild(li, el.childNodes[0]);
            }
        document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none";        
        document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="<img src='../src/img/ok.png'/>刷新成功";                                                                                     
        setTimeout(function () {
            wrapper.refresh();
            document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="";                                
            },1000);//模拟qq下拉刷新显示成功效果
        /****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
    }, 1000);
}
function Load() {
    setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
        var el, li, i;
        el =document.querySelector("#wrapper ul");

        for (i=0; i<data.length; i++) {
            li = document.createElement('li');
            li.innerHTML='<img class="dataimg" src="'+data[i]+'" alt="" />'
            el.appendChild(li, el.childNodes[0]);
        }
        wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
    },1000);    
}

</script>
</body>
</html>

 

posted @ 2017-02-22 19:46  websjs  阅读(1755)  评论(1)  编辑  收藏  举报