这里总结一下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多的情况下对性能要求挺高的,所以不能滥用。