pc加载更多功能和移动端下拉刷新加载数据

为了方便阅读，本文将分为两个部分，分别讲解PC端的加载更多功能和移动端的下拉刷新加载数据。

PC加载更多功能

HTML结构

首先，我们需要搭建一个基本的HTML结构，如下所示：

<div id="list">
  <ul>
    <!-- 列表内容 -->
  </ul>
  <div id="load-more">点击加载更多</div>
</div>

其中，<ul>标签用于存放列表内容，<div id="load-more">标签用于显示加载更多按钮。

CSS样式

接下来，我们需要为按钮添加一些样式，让它看起来更像一个按钮。具体代码如下：

#load-more {
  display: block;
  margin: 20px auto;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  background-color: #42b983;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

JavaScript代码

最后一步，我们需要编写JavaScript代码实现点击按钮后加载更多内容。具体代码如下：

var pageNum = 1; // 当前页数
var totalPage = 10; // 总页数

$('#load-more').click(function() {
  if (pageNum < totalPage) {
    $.ajax({
      type: 'GET',
      url: '/api/getMoreData?pageNum=' + pageNum,
      success: function(data) {
        // 将返回的数据添加到列表中
        $('#list ul').append(data);
        pageNum++;
        if (pageNum >= totalPage) {
          $('#load-more').hide();
        }
      }
    });
  } else {
    $('#load-more').hide();
  }
});

当用户点击按钮时，会通过Ajax请求获取更多数据，并将返回的数据添加到已有的列表中。如果已经显示了全部数据，就隐藏加载更多按钮。

移动端下拉刷新加载数据

HTML结构

为了实现下拉刷新功能，我们需要增加一个<div id="wrapper">标签，包含<ul>标签和一个下拉刷新提示区域。具体代码如下：

<div id="wrapper">
  <div id="pullDown">
    <span class="pullDownIcon"></span>
    <span class="pullDownLabel">下拉刷新...</span>
  </div>
  <ul id="list">
    <!-- 列表内容 -->
  </ul>
</div>

CSS样式

接下来，我们需要为下拉刷新提示区域添加样式。具体代码如下：

#pullDown {
  position: absolute;
  top: -50px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  z-index: -1;
}
#pullDown .pullDownIcon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  background-color: #8FD3F8;
  border-radius: 12px;
}
#pullDown .pullDownLabel {
  font-size: 14px;
  color: #888;
}

/* 为了防止在触摸屏幕时出现穿透效果，需要增加以下样式 */
#wrapper {
  overflow: hidden;
}

JavaScript代码

最后一步，我们需要编写JavaScript代码实现下拉刷新功能。具体代码如下：

var myScroll = new IScroll('#wrapper', {
  probeType: 3, //使用了触碰滑动插件，需要开启3
  useTransition: true, //使用CSS3过渡动画
  click: true //允许点击事件
});

var pullDownEl = document.getElementById('pullDown');
var pullDownOffset = pullDownEl.offsetHeight;

myScroll.on('scroll', function() {
  if (this.y > pullDownOffset) {
    pullDownEl.style.zIndex = 1;
    $('#pullDown .pullDownLabel').html('松开即可刷新...');
  } else {
    pullDownEl.style.zIndex = -1;
    $('#pullDown .pullDownLabel').html('下拉刷新...');
  }
});

myScroll.on('scrollEnd', function() {
  if (this.y > pullDownOffset) {
    pullDownEl.style.zIndex = -1;
    $('#pullDown .pullDownIcon').addClass('loading');
    $('#pullDown .pullDownLabel').html('加载中...');

    // 发送请求获取最新数据
    $.ajax({
      type: 'GET',
      url: '/api/getNewData',
      success: function(data) {
        // 将返回的数据添加到列表中
        $('#list ul').prepend(data);
        myScroll.refresh();
        $('#pullDown .pullDownIcon').removeClass('loading');
        $('#pullDown .pullDownLabel').html('下拉刷新...');
      }
    });
  }
});

当用户下拉到一定距离时，下拉刷新提示区域会显示出来，并提示用户松开即可刷新。当用户松开手指，会自动发送请求获取最新数据，刷新页面。