jquery实现加载更多”转圈圈”效果(示例代码)

下面是详细的攻略。

1. 什么是“加载更多”功能？

“加载更多”功能是指在页面上展现一部分数据，当用户滚动到页面底部时，自动加载更多数据，让用户可以无限滚动阅读。

2. 如何实现“加载更多”功能？

实现“加载更多”功能可以使用ajax技术和jquery库。ajax技术可以帮助我们在不刷新页面的情况下向服务器发送请求，jquery可以帮助我们方便地操作DOM元素。

2.1 示例一

下面是一个使用jquery实现“加载更多”转圈圈效果的示例代码：

<!--html部分-->
<ul class="list">
  <li>第1条数据</li>
  <li>第2条数据</li>
  <li>第3条数据</li>
  <li>第4条数据</li>
  <li>第5条数据</li>
  <li>第6条数据</li>
  <li>第7条数据</li>
  <!--省略部分代码-->
</ul>
<div class="load-more">
  <a href="#">加载更多</a>
  <div class="load-more-icon">loading...</div>
</div>

//javascript部分
//初始化
var page = 1; //当前页码
var isLoading = false; //是否正在加载更多数据

$(document).ready(function(){
  $('.load-more a').click(function(event){
    event.preventDefault(); //阻止默认跳转行为
    if(!isLoading){ //如果没有正在加载
      isLoading = true; //标记为正在加载
      $('.load-more-icon').show(); //显示loading图标
      $.ajax({
        url: 'url/to/your/server',
        type: 'get',
        data: {page: page},
        dataType: 'json',
        success: function(data){
          if(data.length > 0){ //如果有数据
            for(var i=0; i<data.length; i++){
              $('.list').append('<li>'+data[i]+'</li>'); //添加数据到列表
            }
            isLoading = false; //标记为加载完成
            $('.load-more-icon').hide(); //隐藏loading图标
            page++; //页码加1
          }else{ //没有更多数据了
            $('.load-more a').text('没有更多了'); //修改提示文字
          }
        },
        error: function(){
          isLoading = false;
          $('.load-more-icon').hide();
          alert('加载失败，请重试！');
        }
      });
    }
  });
});

2.2 示例二

下面是另一个使用jquery实现“加载更多”转圈圈效果的示例代码：

<!--html部分-->
<ul class="list">
  <li>第1条数据</li>
  <li>第2条数据</li>
  <li>第3条数据</li>
  <li>第4条数据</li>
  <li>第5条数据</li>
  <li>第6条数据</li>
  <li>第7条数据</li>
  <!--省略部分代码-->
</ul>
<div class="load-more">
  <a href="#">加载更多</a>
</div>
<div class="loading">
  <div class="loading-icon"></div>
  <div class="loading-text">正在加载中</div>
</div>

/*css部分*/
.loading{
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.loading-icon{
  width:20px;
  height:20px;
  border-radius:20px;
  background-color:#ccc;
  animation:spin 1s linear infinite;
  margin:0 auto;
}
.loading-text{
  margin-top:10px;
  text-align:center;
  font-size:14px;
  color:#333;
}

@keyframes spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

//javascript部分
//初始化
var page = 1; //当前页码
var isLoading = false; //是否正在加载更多数据

$(document).ready(function(){
  $('.load-more a').click(function(event){
    event.preventDefault(); //阻止默认跳转行为
    if(!isLoading){ //如果没有正在加载
      isLoading = true; //标记为正在加载
      $('.loading').fadeIn(200); //显示loading图标
      $.ajax({
        url: 'url/to/your/server',
        type: 'get',
        data: {page: page},
        dataType: 'json',
        success: function(data){
          if(data.length > 0){ //如果有数据
            for(var i=0; i<data.length; i++){
              $('.list').append('<li>'+data[i]+'</li>'); //添加数据到列表
            }
            isLoading = false; //标记为加载完成
            $('.loading').fadeOut(200); //隐藏loading图标
            page++; //页码加1
          }else{ //没有更多数据了
            $('.load-more a').text('没有更多了'); //修改提示文字
            $('.loading').fadeOut(200); //隐藏loading图标
          }
        },
        error: function(){
          isLoading = false;
          $('.loading').fadeOut(200); //隐藏loading图标
          alert('加载失败，请重试！');
        }
      });
    }
  });
});

3. 总结

以上就是使用jquery实现“加载更多”转圈圈效果的示例代码和说明。实现“加载更多”功能可以给用户带来更好的体验，但也需要注意性能问题，避免一次性加载大量数据导致页面卡顿。