文档章节

IScroll

w
 webchock
发布于 2014/12/22 10:00
字数 544
阅读 148
收藏 1

这里总结一下IScroll使用应该注意的几点细节:

1、如果内容的高度比使用iscroll的标签的小的iscroll是不能滚动,也就是不能有上拉下拉的效果。

2、绑定了iscroll后如果有数据变动(添加或删除了标签)需要使用refresh()方法进行刷新,要不然要失效。

3、使用iscroll事件的时候(scrollstart,scroll,srollend)一定要设置一个参数:probeType如果没设置那么绑定事件就会无效。probeType的有效参数为1,2,3,越高就监听越精确,具体可以自己去试试。

4、绑定iscroll事件主要用到两个参数:this.y,this.maxScrollY;

this.y:就是你绑定iscroll的标签的y坐标,当在最上面的时候是0,滑到最下面就是maxScrollY;向下滑动值会增大

this.maxScrollY:就是滑动到最后一个元素时的y坐标

下拉刷新:要用到this.y;判断当y值大于多少时就执行刷新,现在普遍的都还要加上一个条件,就是松开后才刷新,要实现这个功能就要绑定touchend这个事件

上拉加载:用到maxScrollY,当当前的this.y大于maxScrollY某个数值的时候就进行加载,这里可以不用松开才加载,看个人喜好

5、绑定IScroll的标签要记得设置overflow:hidden属性

6、如果在使用了iscroll的页面要绑定其他事件的时候要注意,如果用了event.preventdefalut()的方法有可能会是iscroll失效,滚动不了。

7、使用IScroll要注意不要嵌套太多标签,只有wrapper(绑定iscroll的标签)的第一个子元素才可以滚动,所以要把滚动的列表元素放进这个子元素内。

即:

<div id="wrapper">

       <div>

  滚动列表

       </div>

      <div>

     若放在这里则不会滚动

     </div>

</div>

以下就是使用IScroll会出现的一些问题:

1、当多个标签绑定了IScroll的时候偶尔会出现某个标签不能滑动,可是当刷新后又可以了,所以iscroll多的情况下对性能要求挺高的,所以不能滥用。



© 著作权归作者所有

w
粉丝 4
博文 13
码字总数 5070
作品 0
广州
私信 提问
加载中

评论(1)

Narella南妹
Narella南妹
记得亮哥说,下拉刷新的时候还要注意,当一次刷新请求没有加载完成,不允许再发请求。除此之外,刷新请求也不能太频繁,可以设定上一次刷新和下一次刷新有一定的时间间隔。
前端必备自定义滚动库——iScroll

作者真的很懒,这篇文章从想法开始到现在都几个月了。😊 iScroll是什么 很多场景,如果使用body的滚动会很不方便,这时候,就会使用某个元素的局部滚动,恶心的事情就会发生了。 pc端web,...

chavesgu
05/21
0
0
iscroll4文本框输入后会列表内容溢出导致上下滑动出现偏离

在iscroll4的例子上添加了几个文本框 然后发现在点击文本框的时候如果文本框的位置在弹出键盘的上方则没有事,如果弹出的键盘正好覆盖文本框 这个时候如果在文本框内输入文字会把iscroll4滑动...

sky止殇
2013/08/08
1K
2
webpack打包后iscroll报错

用new webpack.optimize.CommonsChunkPlugin打包iscroll后 运行报IScroll未定义, 没打包前正常运行

duoduodym
2017/06/10
260
1
使用iScroll时,input等不能输入内容的解决方法

最近做移动平台的应用,使用iscroll使屏幕上下滑动。发现当使用iscroll后,input等不能输入内容了。只要在iscroll.js文件中加入如下代码就ok了。 function allowFormsInIscroll(){ [].slice...

林宝基
2013/09/04
455
0
iscroll总是:iScroll is not defined

我用angularjs+iScroll+bootstrap实现下拉刷新,但是在angualrJS的 控制器 里面每次 new iScroll的时候,总是报iScroll is not defined,请问这是怎么回事?...

放荡_蜗牛
2015/11/30
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

堆”和“栈

C++作为一款C语言的升级版本,具有非常强大的功能。它不但能够支持各种程序设计风格,而且还具有C语言的所有功能。我们在这里为大家介绍的是其中一个比较重要的内容,C++内存区域的基本介绍。...

SibylY
28分钟前
3
0
总结:Https

一、介绍 简单理解,https即在http协议的基础上,增加了SSL协议,保障数据传输的安全性。 它由以前的http—–>tcp,改为http——>SSL—–>tcp;https采用了共享密钥加密+公开密钥加密的方式 ...

浮躁的码农
30分钟前
4
0
数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
今天
7
0
MySQL 表崩溃修复

MySQL日志报错 2019-10-19 13:41:51 19916 [ERROR] /usr/local/mysql/bin/mysqld: Table './initread_hss/user_info' is marked as crashed and should be repaired2019-10-19 13:41:51 1......

雁南飞丶
今天
6
0
Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部