IScroll那些事_当内容不足时下拉刷新的解决方法

IScroll是一款用于实现移动端滚动的Javascript库，可以实现移动端上可滚动的区域。其中，常见的功能是下拉刷新，本篇攻略将详细讲解“IScroll那些事_当内容不足时下拉刷新的解决方法”。

一、IScroll下拉刷新原理

IScroll的下拉刷新可以通过监听用户手势的事件，来判断用户是否进行了下拉动作，从而触发下拉刷新的操作。

具体来说，IScroll在初始化的时候，会创建一个滚动条，而下拉刷新功能就是通过改变滚动条的位置来实现的。当用户下拉内容超出页面顶部时，IScroll会触发“pullDown”事件，这个事件可以被用户的代码监听，在事件中通过Ajax请求数据并重绘页面，就可以实现下拉刷新功能。

二、实现IScroll下拉刷新的步骤

引入IScroll库和相关的CSS文件：

<link rel="stylesheet" href="iscroll.css">  
<script src="iscroll-lite.js"></script>

创建一个可滚动的区域：

<div id="wrapper">
    <div id="scroll-content">
        <!-- 这里放置页面内容 -->
    </div>
</div>

其中，wrapper是可滚动区域的包裹层，scroll-content是可滚动区域的内容。

初始化IScroll对象，并监听下拉刷新事件：

var myScroll = new IScroll('#wrapper', { 
   probeType: 3, // 设置监听位置
   onScrollMove: function () {
       if (this.y > 50) { 
          // 超过50像素触发下拉刷新事件
          $('#scroll-refresh').show();
       }
   },
   onScrollEnd: function () {
       if ($('#scroll-refresh i').hasClass('up')) { 
           // 开始刷新
           refreshData();
       } 
   }
});

function refreshData(){
   // 下拉刷新代码
}

下拉刷新代码：

function refreshData(){
    // 显示“正在刷新”文字
    $('#scroll-refresh i').addClass('spin');
    $('#scroll-refresh span').html('正在刷新...');

    // 模拟下拉刷新操作
    setTimeout(function(){
        // 完成刷新操作后，隐藏刷新区域
        $('#scroll-refresh i').removeClass('spin');
        $('#scroll-refresh span').html('下拉刷新');
        $('#scroll-refresh').hide();
        // 更新页面内容      
    },1500);
}