使用IScroll5实现滚动
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
- <meta name="format-detection" content="telephone=no, email=no, adress=no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-touch-fullscreen" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="description" content="">
- <meta name="keywords" content="">
- <link type="text/css" rel="stylesheet" href="./css/reset.css" />
- <link type="text/css" rel="stylesheet" href="./css/index.css" />
- <title></title>
- </head>
- <body>
- <div id="wrapper">
- <div id="scroller">
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li id="a">5</li>
- <li>6</li>
- <li>7</li>
- <li>8</li>
- <li>9</li>
- <li>10</li>
- <li>11</li>
- <li>12</li>
- <li>13</li>
- <li>14</li>
- <li>15</li>
- <li>16</li>
- <li>17</li>
- <li>18</li>
- <li>19</li>
- <li>20</li>
- </ul>
- </div>
- </div>
- <div class="footer">
- <p>上面的容器是可以滚动的区域</p>
- </div>
- <script src="js/jquery-2.0.3.min.js"></script>
- <script src="js/iScroll.js"></script>
- <script>
- //IScroll会获取容器内的第一个子元素进行滚动,其它子元素会被忽略,且该子元素(scroller)必须有固定的高度(或宽度),在这里,即ID为scroller的元素可以滚动
- var myScroll = new IScroll('#wrapper',{
- mouseWheel : true, //鼠标滚轮支持
- scrollbars : true, //滚动条支持
- scrollY : true, //滚动方向(垂直)
- scrollX : true, //滚动方向(水平)
- bounce : true, //边界时的反弹动画,默认true
- click : true, //IScroll默认禁止了点击事件,如需绑定点击事件,请将该参数值设为true
- freeScroll : true, //当需要执行两个纬度上的滚动时(即横向、纵向都开启),设置该参数,默认为false
- startX : 0, //滚动条开始的位置(横坐标)
- startY : 0, //滚动条开始的位置(纵坐标)
- tap : true, //设置为true时,允许为用户点击或者触摸(并没有滚动时)触发一个自定义事件,或者设置值为一个自定义事件名称的字符串
- snap : 'li' //对齐(根据元素li对齐切割整个容器)
- });
- console.log(myScroll.options); //通过options对象访问myScroll实例的配置信息
- //给li绑定点击事件
- $('#scroller ul li').on('click',function(){
- console.log($(this).html());
- })
- //绑定tap自定义事件
- $('#wrapper').on('tap',function(){
- console.log('开始滚动了');
- })
- myScroll.scrollTo(0,-250); //控制滚动条到任意的位置
- myScroll.scrollBy(0,-10); //从当前位置向下滚动10个像素
- //滚动到该元素的位置,第二个参数为时间,第三个第四个参数为偏移量(如果设置这两个参数为true,该元素将会显示在容器的中间)
- myScroll.scrollToElement('#a',1000,0,0);
- //关于snap对齐后操作的方法
- myScroll.goToPage(0,5,1000); //滚动到对齐后的第五页(即第五个li的位置)
- myScroll.next(); //当前位置的下一页
- myScroll.prev(); //当前位置的上一页
- //IScroll需要知道容器确切的尺寸,如果容器大小发生了变化,需要使用刷新方法
- myScroll.refresh();
- //自定义事件
- myScroll.on('scrollEnd',function(){
- console.log('滚动结束');
- console.log(this.x + '&' + this.y); //当前位置
- console.log(this.directionX + '&' + this.directionY); //最后的方向
- console.log(this.currentPage); //当前对齐捕获点
- })
- //销毁
- //myScroll.destroy();
- //当滚动到底部时的myScroll.x/y
- console.log(myScroll.maxScrollX + '&' + myScroll.maxScrollY);
- </script>
- </body>
- </html>
index.css
- #wrapper{width:100%; height:500px; overflow:hidden;}
- #scroller{width:500px; height:60rem;}
- ul li{width:500px; height:3rem; line-height:3rem; border-bottom:1px solid #CCC; text-align:center; box-sizing:border-box;}
- .footer p{line-height:3rem; text-align:center;}
使用IScroll5实现上拉加载、下拉刷新
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
- <meta name="format-detection" content="telephone=no, email=no, adress=no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-touch-fullscreen" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="description" content="">
- <meta name="keywords" content="">
- <link type="text/css" rel="stylesheet" href="./css/reset.css" />
- <link type="text/css" rel="stylesheet" href="./css/index.css" />
- <title></title>
- </head>
- <body>
- <div id="wrapper">
- <div id="scroller">
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- <li>6</li>
- <li>7</li>
- <li>8</li>
- <li>9</li>
- <li>10</li>
- <li>11</li>
- <li>12</li>
- <li>13</li>
- <li>14</li>
- <li>15</li>
- <li>16</li>
- <li>17</li>
- <li>18</li>
- <li>19</li>
- <li>20</li>
- </ul>
- </div>
- <p class="p-1">下拉刷新</p>
- <p class="p-2">上拉加载</p>
- </div>
- <div class="footer">
- <p>上面的容器是可以滚动的区域</p>
- </div>
- <script src="js/jquery-2.0.3.min.js"></script>
- <script src="js/iScroll.js"></script>
- <script>
- //实现上拉加载、下拉刷新
- var myScroll = new IScroll('#wrapper',{
- scrollY : true,
- scrollX : false
- })
- myScroll.on('scrollEnd',function(){
- //因为值为负数,所以使用小于等于
- if(this.y <= this.maxScrollY){
- console.log('滑动到最底部了');
- var li = '<li>新的内容</li><li>新的内容</li><li>新的内容</li><li>新的内容</li><li>新的内容</li>';
- $('#scroller ul').append(li);
- $('#scroller').css({height : $('#scroller').height() + (42 * 5) + 'px'});
- this.refresh();
- }
- })
- </script>
- </body>
- </html>
index.css
- #wrapper{width:100%; height:500px; overflow:hidden; position:relative;}
- #scroller{width:100%; height:840px; background-color:#FFF; position:absolute; z-index:1;}
- ul li{width:100%; height:42px; line-height:42px; border-bottom:1px solid #CCC; text-align:center; box-sizing:border-box;}
- #wrapper p{position:absolute; text-align:center; height:3rem; line-height:3rem; color:red; width:100%;}
- #wrapper p.p-1{top:0;}
- #wrapper p.p-2{bottom:0;}
- .footer p{line-height:3rem; text-align:center;}
参考地址:
http://www.mamicode.com/info-detail-331827.html
http://www.tuicool.com/articles/vMn2u2
使用IScroll5实现滚动的更多相关文章
- react + iscroll5 实现完美 下拉刷新,上拉加载
经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能. 一开始直接采用了react-iscroll插件,它是基于iscroll插件开发的组件.但是开发过程中,发现 ...
- react + iscroll5
react + iscroll5 经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能. 一开始直接采用了react-iscroll插件,它是基于iscroll插 ...
- jquery——移动端滚动条插件iScroll.js
官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...
- 写入标题使用依赖注入Title的setTitle方法
1. 声明 Generator的声明方式类似一般的函数声明,只是多了个*号,并且一般可以在函数内看到yield关键字 function* showWords() { yield 'one'; yiel ...
- iscroll5实现一个下拉刷新上拉加载的效果
直接上代码!!! <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...
- iScroll-5 API 中文版
http://wiki.jikexueyuan.com/project/iscroll-5/ http://www.mamicode.com/info-detail-331827.html IScro ...
- iScroll-5拉动刷新功能实现与iScroll-4上拉刷新的一点改进
近来在学习移动设备的应用开发,接触了jQuery mobile,在网上查阅相关资料时发现一个叫”iScroll“的小插件.其实这个iScroll插件跟jQuery mobile没有多大关系,并不是基于 ...
- H5手机开发锁定表头和首列(惯性滚动)解决方案
前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件. iscroll插件下载地址:iscroll5 该功能demo github地址: http ...
- IScroll5不能滑到最底端的解决办法
IScroll总体上用起来比较简单,但是如果用不好的可能会产生底部一点滚动不上去的问题. 环境:weui+iscroll5 整体布局及id如下 searchbarwrapper divscroll ...
随机推荐
- es6函数模块-------初步学习
初步学习: 函数参数允许尾逗号 function clownsEverywhere( param1, param2, //param2后面有逗号 ) { } 函数参数可以赋初值 利用解构赋值默认值结合 ...
- codeforces 70 D. Professor's task 动态凸包
地址:http://codeforces.com/problemset/problem/70/D 题目: D. Professor's task time limit per test 1 secon ...
- Python之路——堡垒机原理及其简单实现
1 堡垒机基本概述 其从功能上讲,它综合了核心系统运维和安全审计管控两大主干功能,从技术实现上讲,通过切断终端计算机对网络和服务器资源的直接访问,而采用协议代理的方式,接管了终端计算机对网络和服务器的 ...
- NIO 03
1. 客户端要主动去连接:channel.connect(new InetSocketAddress("localhost",8888)); //用channel.finishCo ...
- cx_Oracle连接数据库总结
python中连接oracle数据库使用第三方库文件cx_Oracle时遇到了各种问题,网上查找资料调试了几天才弄好,下面是不断调试后总结的一些经验.1.oracle客户端(Oracle Instan ...
- 解决“检测到有潜在危险的Request.Form值”
先看如下 web.config 的代码: <system.web> <compilation debug="true" targetFramework=& ...
- 20145302张薇《Java程序设计》第六周学习总结
20145302 <Java程序设计>第六周学习总结 教材学习内容总结 第十章 串流设计的概念 无论来源和目的地实体形式是什么,只要取得InputStream和OutputStream实例 ...
- 开发人员不可不看的 OBD通讯协议知识
OBD-II Network Standards» J1850 VPW– Adopted by GM; also known as Class 2.– Adopted by Chrysler (kno ...
- markdown工作随笔总结
1. 锚点 (使用方法和链接很像) ## 目录 1. [命名](#命名) ....... **[返回顶部](#目录)** ## 命名 ###命名原则 可以从返回顶部回到目录,也可以点击目录的命名跳到命 ...
- Jquery7 表单选择器
学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以使用之前的常规选择器或过滤器,也可以使用 jQuery 为表 ...