碼上快樂

相關內容    簡體    繁體

使用IScroll5實現滾動

本文轉載自   查看原文   2017-12-21 10:22   1096    js
[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  
  6.     <meta name="format-detection" content="telephone=no, email=no, adress=no">  
  7.     <meta name="apple-mobile-web-app-capable" content="yes">  
  8.     <meta name="apple-touch-fullscreen" content="yes">  
  9.     <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  10.     <meta name="description" content="">  
  11.     <meta name="keywords" content="">  
  12.     <link type="text/css" rel="stylesheet" href="./css/reset.css" />  
  13.     <link type="text/css" rel="stylesheet" href="./css/index.css" />  
  14.     <title></title>  
  15. </head>  
  16. <body>  
  17. <div id="wrapper">  
  18.     <div id="scroller">  
  19.         <ul>  
  20.             <li>1</li>  
  21.             <li>2</li>  
  22.             <li>3</li>  
  23.             <li>4</li>  
  24.             <li id="a">5</li>  
  25.             <li>6</li>  
  26.             <li>7</li>  
  27.             <li>8</li>  
  28.             <li>9</li>  
  29.             <li>10</li>  
  30.             <li>11</li>  
  31.             <li>12</li>  
  32.             <li>13</li>  
  33.             <li>14</li>  
  34.             <li>15</li>  
  35.             <li>16</li>  
  36.             <li>17</li>  
  37.             <li>18</li>  
  38.             <li>19</li>  
  39.             <li>20</li>  
  40.         </ul>  
  41.     </div>  
  42. </div>  
  43. <div class="footer">  
  44.     <p>上面的容器是可以滾動的區域</p>  
  45. </div>  
  46. <script src="js/jquery-2.0.3.min.js"></script>  
  47. <script src="js/iScroll.js"></script>  
  48. <script>  
  49. //IScroll會獲取容器內的第一個子元素進行滾動，其它子元素會被忽略，且該子元素（scroller）必須有固定的高度（或寬度），在這里，即ID為scroller的元素可以滾動  
  50. var myScroll = new IScroll('#wrapper',{  
  51.     mouseWheel : true,      //鼠標滾輪支持  
  52.     scrollbars : true,      //滾動條支持  
  53.     scrollY : true,         //滾動方向（垂直）  
  54.     scrollX : true,         //滾動方向（水平）  
  55.     bounce : true,          //邊界時的反彈動畫，默認true  
  56.     click : true,           //IScroll默認禁止了點擊事件，如需綁定點擊事件，請將該參數值設為true  
  57.     freeScroll : true,      //當需要執行兩個緯度上的滾動時（即橫向、縱向都開啟），設置該參數，默認為false  
  58.     startX : 0,             //滾動條開始的位置（橫坐標）  
  59.     startY : 0,             //滾動條開始的位置（縱坐標）  
  60.     tap : true,             //設置為true時，允許為用戶點擊或者觸摸（並沒有滾動時）觸發一個自定義事件，或者設置值為一個自定義事件名稱的字符串  
  61.     snap : 'li'             //對齊（根據元素li對齊切割整個容器）  
  62. });  
  63.   
  64. console.log(myScroll.options);      //通過options對象訪問myScroll實例的配置信息  
  65.   
  66. //給li綁定點擊事件  
  67. $('#scroller ul li').on('click',function(){  
  68.     console.log($(this).html());  
  69. })  
  70.   
  71. //綁定tap自定義事件  
  72. $('#wrapper').on('tap',function(){  
  73.     console.log('開始滾動了');  
  74. })  
  75.   
  76. myScroll.scrollTo(0,-250);      //控制滾動條到任意的位置  
  77.   
  78. myScroll.scrollBy(0,-10);       //從當前位置向下滾動10個像素  
  79.   
  80. //滾動到該元素的位置，第二個參數為時間，第三個第四個參數為偏移量（如果設置這兩個參數為true，該元素將會顯示在容器的中間）  
  81. myScroll.scrollToElement('#a',1000,0,0);  
  82.   
  83. //關於snap對齊后操作的方法  
  84. myScroll.goToPage(0,5,1000);    //滾動到對齊后的第五頁（即第五個li的位置）  
  85. myScroll.next();    //當前位置的下一頁  
  86. myScroll.prev();    //當前位置的上一頁  
  87.   
  88. //IScroll需要知道容器確切的尺寸，如果容器大小發生了變化，需要使用刷新方法  
  89. myScroll.refresh();  
  90.   
  91. //自定義事件  
  92. myScroll.on('scrollEnd',function(){  
  93.     console.log('滾動結束');  
  94.     console.log(this.x + '&' + this.y);     //當前位置  
  95.     console.log(this.directionX + '&' + this.directionY);   //最后的方向  
  96.     console.log(this.currentPage);      //當前對齊捕獲點  
  97. })  
  98.   
  99. //銷毀  
  100. //myScroll.destroy();  
  101.   
  102. //當滾動到底部時的myScroll.x/y  
  103. console.log(myScroll.maxScrollX + '&' + myScroll.maxScrollY);  
  104.   
  105. </script>  
  106. </body>  
  107. </html>  
 

index.css

 

[css]  view plain  copy
 
  1. #wrapper{width:100%; height:500px; overflow:hidden;}  
  2. #scroller{width:500px; height:60rem;}  
  3. ul li{width:500px; height:3rem; line-height:3rem; border-bottom:1px solid #CCC; text-align:center; box-sizing:border-box;}  
  4. .footer p{line-height:3rem; text-align:center;}  

使用IScroll5實現上拉加載、下拉刷新

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  
  6.     <meta name="format-detection" content="telephone=no, email=no, adress=no">  
  7.     <meta name="apple-mobile-web-app-capable" content="yes">  
  8.     <meta name="apple-touch-fullscreen" content="yes">  
  9.     <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  10.     <meta name="description" content="">  
  11.     <meta name="keywords" content="">  
  12.     <link type="text/css" rel="stylesheet" href="./css/reset.css" />  
  13.     <link type="text/css" rel="stylesheet" href="./css/index.css" />  
  14.     <title></title>  
  15. </head>  
  16. <body>  
  17. <div id="wrapper">  
  18.     <div id="scroller">  
  19.         <ul>  
  20.             <li>1</li>  
  21.             <li>2</li>  
  22.             <li>3</li>  
  23.             <li>4</li>  
  24.             <li>5</li>  
  25.             <li>6</li>  
  26.             <li>7</li>  
  27.             <li>8</li>  
  28.             <li>9</li>  
  29.             <li>10</li>  
  30.             <li>11</li>  
  31.             <li>12</li>  
  32.             <li>13</li>  
  33.             <li>14</li>  
  34.             <li>15</li>  
  35.             <li>16</li>  
  36.             <li>17</li>  
  37.             <li>18</li>  
  38.             <li>19</li>  
  39.             <li>20</li>  
  40.         </ul>  
  41.     </div>  
  42.     <p class="p-1">下拉刷新</p>  
  43.     <p class="p-2">上拉加載</p>  
  44. </div>  
  45. <div class="footer">  
  46.     <p>上面的容器是可以滾動的區域</p>  
  47. </div>  
  48. <script src="js/jquery-2.0.3.min.js"></script>  
  49. <script src="js/iScroll.js"></script>  
  50. <script>  
  51.   
  52. //實現上拉加載、下拉刷新  
  53. var myScroll = new IScroll('#wrapper',{  
  54.     scrollY : true,  
  55.     scrollX : false  
  56. })  
  57.   
  58. myScroll.on('scrollEnd',function(){  
  59.     //因為值為負數，所以使用小於等於  
  60.     if(this.y <= this.maxScrollY){  
  61.         console.log('滑動到最底部了');  
  62.         var li = '<li>新的內容</li><li>新的內容</li><li>新的內容</li><li>新的內容</li><li>新的內容</li>';  
  63.         $('#scroller ul').append(li);  
  64.         $('#scroller').css({height : $('#scroller').height() + (42 * 5) + 'px'});  
  65.         this.refresh();  
  66.     }  
  67. })  
  68.   
  69. </script>  
  70. </body>  
  71. </html>  

index.css

 

[css]  view plain  copy
 
  1. #wrapper{width:100%; height:500px; overflow:hidden; position:relative;}  
  2. #scroller{width:100%; height:840px; background-color:#FFF; position:absolute; z-index:1;}  
  3. ul li{width:100%; height:42px; line-height:42px; border-bottom:1px solid #CCC; text-align:center; box-sizing:border-box;}  
  4. #wrapper p{position:absolute; text-align:center; height:3rem; line-height:3rem; color:red; width:100%;}  
  5. #wrapper p.p-1{top:0;}  
  6. #wrapper p.p-2{bottom:0;}  
  7. .footer p{line-height:3rem; text-align:center;}  

參考地址：

http://www.mamicode.com/info-detail-331827.html

http://www.tuicool.com/articles/vMn2u2


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 iscroll5實現一個下拉刷新上拉加載的效果 iScroll5 API速查隨記 【iScroll源碼學習03】iScroll事件機制與滾動條的實現 3.10 針對於iscroll 使用y獲取滾動高度 使用iScroll實現上拉或者下拉刷新 iscroll 使用及遇到的問題 在React中引入IScroll插件做滾動 異步加載DOM造成的高度問題造成iScroll不能滾動 jquery——移動端滾動條插件iScroll.js 移動端滾動問題(-webkit-overflow-scrolling/iscroll)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM