IScroll上拉加载下拉刷新

最新推荐文章于 2021-08-22 01:40:10 发布

原创最新推荐文章于 2021-08-22 01:40:10 发布 · 368 阅读

1 ·

CC 4.0 BY-SA版权

移动端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用IScroll实现的上拉加载更多与下拉刷新功能的示例。该示例通过HTML、CSS和JavaScript实现了移动端网页的内容滚动效果，并在下拉时触发页面刷新，在上拉触底时加载更多数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
       <meta http-equiv="pragma" content="no-cache">
       <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
       <meta http-equiv="expires" content="0">
       <title>IScroll上拉加载下拉刷新</title>
       <style type="text/css">
           @charset "utf-8";
           *{margin: 0; padding: 0;}
           html,body{
               width:100%;
               height:100%;
               font-size:1rem;
               background:#f7f7f8;
               position:relative;
               max-width:480px;
               margin:0 auto;
               font-family:-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
           }
           ul,li {
               list-style:none;
           }
           .a{
               height: 100px;
               width: 100%;
               background: blue;
           }
           #wrapper{
               width: 100%;
               overflow: hidden;
               position: absolute;
               top: 0px;
               bottom: 0px;
           }
           #top{
               position: absolute;
               top: -60px;
               transform: ;
               height: 60px;
               width: 100%;
               background: #ccc;
               text-align: center;
               line-height: 60px;
           }
           #bottom{
               text-align: center;
               line-height: 40px;
               height: 40px;
               width: 100%;
               background: #ccc;
           }
           #scroller{
               position: relative;
           }
       </style>
   </head>
   </head>
   <body>
       <div id="wrapper">
             <div id="scroller">
                <div id="top">
                    下拉刷新
                </div>
                <div id="box">
                    <ul id="boxUl">
                        <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                       <li class="a"></li>
                    </ul>
                   <div id="bottom">
                         上拉加载
                    </div>
                </div>
             </div>

       </div>
   <script type="text/javascript" src="js/jquery.js" ></script>
   <script type="text/javascript" src="js/iscroll.js" ></script>
   <script>
       $(function(){
           myScroll = new IScroll("#wrapper",{mouseWheel:true,click:true,})
           $(".a:even").css("background","#f40");
           $("#wrapper").on("touchend",function(){
               if(myScroll.y>50){
                        $("#scroller").css("top","60px");
                        $("#top").html("正在刷新");
                        console.log("刷新")
                        setTimeout(function(){$("#scroller").animate({"top":"0px"});$("#top").html("下拉刷新");},1000);
                  }
               if(myScroll.y<myScroll.maxScrollY-2){
                        $("#bottom").html("正在加载");
                        setTimeout(function(){
                            for(var i=0;i<3;i++ ){
                               $("#boxUl").append('<li class="a"></li>');
                            };
                            myScroll.refresh();
                            $(".a:even").css("background","#f40");
                           $("#bottom").html("上拉加载")
                        },1000);
               }
           })
       })
   </script>
   </body>
</html>