• 使用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{100%; height:500px; overflow:hidden;}  
    2. #scroller{500px; height:60rem;}  
    3. ul li{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{100%; height:500px; overflow:hidden; position:relative;}  
    2. #scroller{100%; height:840px; background-color:#FFF; position:absolute; z-index:1;}  
    3. ul li{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; 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
  • 相关阅读:
    学习进度条40
    学习进度条39
    学习进度条38
    学习进度条37
    学习进度条36
    iReport5.6.0使用说明
    Mysql 如何创建一张临时表
    SQL语句出现sql关键字
    SQL-order by两个字段同时排序
    js中==和===区别
  • 原文地址：https://www.cnblogs.com/annie211/p/8078848.html
Copyright © 2020-2023  润新知