1-1系统简介与首页设计第三关-优快云博客

本文链接：https://blog.youkuaiyun.com/kkkkjjj22/article/details/143827621

任务描述
 相关知识
loading效果的实现
DOM的插入
上拉加载触发条件
上拉加载的逻辑
编程要求
 代码实现

任务描述

本关任务：实现列表上拉加载效果。

相关知识

为了完成本关任务，你需要掌握：1.loading效果，2.DOM的插入，3.上拉加载触发条件，4.上拉加载的逻辑。

loading效果的实现
loading效果这里是用CSS3实现的。主要用到了动画、transform属性，代码如下：

<div class="loading">加载中...</div>
<style>.a757090db-003a-4bd6-87e0-fcaad5a456cf  @keyframes loading{         0%{             transform: rotate(0deg);         }.a757090db-003a-4bd6-87e0-fcaad5a456cf          100%{             transform: rotate(360deg);         }.a757090db-003a-4bd6-87e0-fcaad5a456cf      }.a757090db-003a-4bd6-87e0-fcaad5a456cf      .loading{         line-height: 50px;         text-align: center;         display: block;         color: #f60;         /*background: #eee;*/     }.a757090db-003a-4bd6-87e0-fcaad5a456cf      .loading:before{         content: '';         width: 20px;         height: 20px;         border-radius: 100%;         margin: 10px;         display: inline-block;         border: 2px solid #f60;         border-bottom-color: transparent;         vertical-align: middle;         animation: loading 1.1s infinite linear;     </style>

这里主要提一个属性： border-bottom-color: transparent;
是设置下边框的颜色为透明。

DOM的插入
这是基本的html结构：

<ul id="list"></ul>
jQuery插入DOM有专门的方法，这里用到的是 append()，代码如下：

function loadData(count){
  var num = 0;
  var result = "";
     for(var i = 0; i < count; i++){
        result+='<li>' +
                '好经典人生语句，经典得让人心痛！' + 
                parseInt(num) +
                '</li>'
     }
     $("#list").append(result);
}

这里已经实现了插入DOM的功能，只需要调用loadData()，就可以插入指定数目的DOM。

上拉加载触发条件
首先要明确下面的几个方法分别代表什么。

$(window).height()表示当前可视区域的高度，随着浏览器的高度变化。

$(document).height()表示整个页面的高度。

$(window).scrollTop()表示当前滚动的地方的窗口顶端到整个页面顶端的距离。

用变量来表示一下它们：

var scrollHeight = $(document).height() - $(window).height();
var scroll = $(window).scrollTop();

当 scroll >= scrollHeight 时，滚动条就到底部了。但是一般会在到达底部之前提前加载，这里只需要 scroll + 60 >= scrollHeight就可以了，表示到达底部还有60px时就会加载。

上拉加载的逻辑
loading效果在滚动条滚动到底部时会出现，在加载完数据后会消失。这里用插入DOM的方式来模拟数据的加载。

代码如下：

var flag = true;
$(window).scroll(function(){
   var scroll = $(window).scrollTop() + 60;
   var scrollHeight = $(document).height() - $(window).height();
   if(scroll >= scrollHeight && flag){
       flag = false;
       var loading = '<div class="loading">加载中..</div>';
       $("#list").append(loading);
       setTimeout(function(){
           loadData(2);
           flag = true;
           $(".loading").remove();
       },1500)
  }
})

这里说明一下 flag的作用：在滚动条滚动到底部时，为了防止 loading效果出现多次，但是数据还没有加载完这种情况。

编程要求

在右侧编辑器Begin至End之间填充代码，实现上拉加载效果。要求如下：

loading效果部分，设置下边框的颜色为透明；

loadData()方法，用append()将dom插入到id="box"的div里；

滚动事件里，判断滚动条是否到达底部；

代码实现

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <style type="text/css">
            *{ 
                margin:0 ; padding:0;
            }
            .hot-article {
                box-sizing: border-box;
                background: #fff;
                padding: 0 20px;
                line-height: 60px;
                border-bottom: 1px solid #eee;
            }
            
            .hot-article .hot-item {
                padding: 0 10px;
            }
            
            .article-item {
                padding: 16px 20px;
                border-bottom: 1px solid #eee;
                color: #888;
                background: #fff;
            }
            
            .article-item img {
                width: 100px;
                height: 80px;
            }
           /**加载旋转效果**/
            @keyframes loading{
               0%{
                  transform: rotate(0deg);
                 }
               100%{
                  transform: rotate(360deg);
                 }
            }
           .loading{
                line-height: 50px;
                text-align: center;
                  display: block;
                color: #f60;
                background: #eee;
            }
           .loading:before{
               content: '';
                width: 20px;
                height: 20px;
                border-radius: 100%;
                margin: 10px;
                display: inline-block;
                border: 2px solid #f60;
                /*在下面的Begin-End之间插入代码，将下边框的颜色设为透明 */
               /*---------- Begin ---------*/
               border-bottom-color: transparent;
               
               /*---------- End ----------*/
                  vertical-align: middle;
                animation: loading 1.1s infinite linear;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="col-lg-9 col-md-9" id="box">
                <div class="row hot-article">
                        <div class="col-lg-3 col-md-3 col-sm-7 col-xs-5">
                            <span>热门文章</span>
                        </div>
                        <div class="col-lg-4 col-lg-offset-5 col-md-5 col-sm-5 col-xs-6 col-md-offset-4">
                            <a href="#" class="hot-item">推荐</a>
                            <a href="#" class="hot-item">前端</a>
                            <a href="#" class="hot-item">推荐</a>
                            <a href="#" class="hot-item">Android</a>
                        </div>
                </div>
            </div>
        </div>
    </body>

    <script>
    var flag = true;
    var count = 0;

    var loadData = function(x){
        var dom = '';
         for(var i=0; i<x; i++) {
             count++;
             dom += '<div class="row article-item">' +
                        '<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">' +
                            '<h4>'+
                                '<a href="#">Vue.js实现可配置的登录表单Vue.js实现可配置的登录表单</a>'+
                           '</h4>'+
                            '<p>'+
                                '<button class="btn btn-success btn-xs">前端</button>'+
                                '<span>&nbsp;&nbsp;&nbsp;rccoder · 1天前 · 45646次阅读  </span>'+ 
                           
                            '</p>'+
                        '</div>'+
                        '<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">'+
                             parseInt(count) + 
                        '</div>'+
                    '</div>'
         }
        /*在下面的Begin-End之间插入代码，插入 dom */
        /*---------- Begin ---------*/
         $("#box").append(dom);
               
        /*---------- End ----------*/
     }

     $(document).ready(function(){
         loadData(3);
     })

     $(window).scroll(function(){
        var scroll = $(window).scrollTop() + 60;
        var scrollHeight = $(document).height() - $(window).height();
         /*在下面的Begin-End之间插入代码，判断滚动条是否到达底部 */
         /*---------- Begin ---------*/
         
         if(scroll >=scrollHeight&&flag   ){ 
              
        	loadMore();//加载更多
             
         }
         /*---------- End ---------*/
              
        
     })
    
    function loadMore(){
         flag = false;
         var loading = '<div class="loading">加载中..</div>';
         $("#box").append(loading);
         setTimeout(function(){
            loadData(2);
            flag = true;
            $(".loading").remove();
         },1500)
    }
    
    </script>

</html>