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请求获取数据
//将获取的数据渲染到页面上
}
});