用Iscroll實現下拉刷新的簡單方法

時間 2019-11-20

標籤 iscroll 實現下拉刷新簡單方法简体版

原文原文鏈接

　　用Iscroll實現下拉刷新的簡單方法：html

　　基本步驟分三步：jquery

　　　　一、開始滾動=== scrollStartapp

　　　　　2，滾動過程當中 === scrollide

　　　　　三、中止滾動=== 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="../../js/jquery-3.1.1.min.js"></script>
 88     <script src="../../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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。