iScroll的简单使用

今天是2017-1-18，每天进步一点点

今天主要来总结一下我在项目中遇到的关于iScroll的使用问题。

第一个是iscroll的初始化问题。

--在页面资源(包括图片)加载完毕后100ms之后初始化，是一种比较好的调用iscroll的方式。

//声明一个全局的变量

var myScroll;

window.addEventListener("load",function(){

setTimeout(function(){

myScroll=new IScroll('wrapper');

},100);

},true);

我常用的方法是在先在初始化函数init中，初始化iscroll

myScroll = new IScroll('#myScroll', {
   useTransition: true,
   bounceTime: 1000,
   momentum: true,
   scrollY: true,
   scrollbars: false,
   click: true,
   probeType: 3,
   mouseWheel: true
});

然后等页面还在完毕后：

$(window).load(function() {
 setTimeout(function() { 
 myScroll.refresh();
 }, 200)
});

第一个比较重要的是iscorll的refresh问题

这是一个非常有用的方法-->当你的滚动区域发生改变(任何小区块的内容高度发生变化都算)，或滚动区域不正确，都是调用refresh方法来使iscroll重新计算滚动区域。

之前较多的使用的是iscroll的页面滚动功能，在做移动web应用时，有一个需求是订单页面的上拉刷新功能。

var startRequest=false;

myScroll.on('scroll',function(){

if((this.maxScrollY-this.y)>80){

startRequest=true;

}

});

myScroll.on('scrollEnd',function(){

//此处准备发送ajax所需要的参数数据

if(startRequest){

startRequest=false;

//发送ajax请求获取数据

//将获取的数据渲染到页面上

}

});