iscroll 上拉加载和下拉刷新

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/iscroll.js"></script>
</head>
<style>
    *{margin:0px;padding:0px;}
    ul{list-style-type:none;}
    html,body{width:100%;height:100%;}
    header{width:100%;height:10%;text-align:center;line-height:50px;background:black;color:white;font-size:12px;}
    footer{width:100%;height:10%;text-align:center;line-height:50px;background:black;color:white;font-size:12px;}
     .box{width:100%;height:80%;overflow:hidden;}
    #wrap{width:100%;height:auto;}
    .shuaxin{width:100%;height:20px;text-align:center;background:#ccc;color:black;display:none;}
    #wrap li{width:100%;line-height:150px;color:yellow;background:blue;text-align:center;border-bottom:1px dashed yellow;}
    .jiazai{width:100%;height:20px;text-align:center;background:#ccc;color:black;display:none;}
</style>
<body>
<header>这个就是测试上拉加载和下拉刷新</header>
<div class="shuaxin">你在下拉刷新</div>
 <div class="box">
      <ul id="wrap">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
      </ul>
 </div>
<div class="jiazai">你是在上拉加载</div>
<footer>这个就是底部</footer>
</body>
<script>
    $(function(){

        var myscroll = new IScroll('.box');
        $(document).on("touchend",function(){
            console.log(myscroll.y);
            if(myscroll.y==0)
            {
                $(".shuaxin").hide();
            }
            if(myscroll.y==myscroll.maxScrollY)
            {
                $(".jiazai").hide();
            }
              myscroll.refresh();
        });
        $(document).on("touchmove",function(){
            console.log(myscroll.y);
            if(myscroll.y>20)
            {
              $(".shuaxin").show();
            }
            if(myscroll.y<myscroll.maxScrollY-20)
            {
                $(".jiazai").show();
            }
        })


    })

</script>
</html>
p.s. 记得引入JQ和iscroll.js
参考链接：https://www.jianshu.com/p/e6127f1e654f
iscroll 上拉加载和下拉刷新

猜你喜欢
