使用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 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

posted @ 2017-12-21 10:22  2350305682  阅读(1639)  评论(0)  编辑  收藏  举报