首页 > 代码库 > 用Iscroll实现下拉刷新的简单方法

用Iscroll实现下拉刷新的简单方法

2024-10-17 08:34:02   214人阅读

　　用Iscroll实现下拉刷新的简单方法：

　　基本步骤分三步：

　　　　1、开始滚动=== scrollStart

　　　　　2，滚动过程中 === scroll

　　　　　3、停止滚动=== scrollEnd
　　注意：在内容滚动时触发，只有在iscroll-probe.js 版本中有用。
 
  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>移动端的触摸滚动</title>
  6     <style>
  7         *{
  8             box-sizing: border-box;
  9             margin: 0;
 10             padding: 0;
 11         }
 12         #header{
 13             position: absolute;
 14             width: 100%;
 15             height: 50px;
 16             line-height: 40px;
 17             text-align: center;
 18             background: cyan;
 19 
 20         }
 21         #wrapper{
 22             position: absolute;
 23             z-index: 1;
 24             top: 50px;
 25             width: 100%;
 26             height: 600px;
 27             overflow: hidden;
 28         }
 29         ul>li{
 30             list-style: none;
 31             width: 100%;
 32             line-height: 50px;
 33             height: 50px;
 34             text-align: center;
 35             border: 1px dashed chartreuse;
 36         }
 37         #footer{
 38             position: absolute;
 39             z-index: 3;
 40             bottom: 0;
 41             left: 0;
 42             height: 60px;
 43             width: 100%;
 44             background: #c3c3c3;
 45         }
 46         #shows{
 47             color: white;
 48             background: rgba(0, 228, 182, 0.5);
 49             display: none;
 50         }
 51     </style>
 52 </head>
 53 <body>
 54     <header>
 55         <div id="header">
 56            <h1>首页</h1>
 57         </div>
 58     </header>
 59     <div id="wrapper">
 60         <ul>
 61             <li id="shows">下拉刷新</li>
 62             <li>内容1</li>
 63             <li>内容2</li>
 64             <li>内容3</li>
 65             <li>内容4</li>
 66             <li>内容5</li>
 67             <li>内容6</li>
 68             <li>内容7</li>
 69             <li>内容8</li>
 70             <li>内容9</li>
 71             <li>内容10</li>
 72             <li>内容11</li>
 73             <li>内容12</li>
 74             <li>内容13</li>
 75             <li>内容14</li>
 76             <li>内容15</li>
 77             <li>内容7</li>
 78             <li>内容8</li>
 79             <li>内容9</li>
 80             <li>内容10</li>
 81             <li>内容11</li>
 82         </ul>
 83     </div>
 84     <footer>
 85         <div id="footer"></div>
 86     </footer>
 87     <script src=http://www.mamicode.com/"../../js/jquery-3.1.1.min.js"></script>
 88     <script src=http://www.mamicode.com/"../../js/iscroll-probe.js"></script>
 89     <script>
 90         var myScroll=new IScroll("#wrapper",{
 91             scrollbars:true,//有滚动条
 92             mouseWheel:false,//允许滑轮滚动
 93             interactiveScrollbars:true,//滚动条可以拖动
 94             scrollY:true,//纵向滚动条可以使用
 95             freeScroll:true,//既有上下又有左右（自由滚动）
 96             probeType:1,//对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。
 97         });
 98         //开始滚动时触发的事件
 99         myScroll.on("scrollStart",function(){
100             $("#shows").show();
101         });
102        // 滚动过程中触发事件
103        myScroll.on("scroll",function(){
104                 if(this.y>40){
105                     $("#shows").text("刷新中");
106                 }
107         });
108         //停止滚动触发的事件
109         myScroll.on("scrollEnd",function(){
110                 $("#shows").hide().text("下拉刷新");
111         })
112     </script>
113 </body>
114 </html>


 


 
用Iscroll实现下拉刷新的简单方法






























        

            
                
                  
                
                

                    联系

                    我们