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请求获取数据

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

  }

});

原文地址:https://www.cnblogs.com/jjworld/p/6297451.html