博客系统 - 系统简介与首页设计

Gliry小姐

已于 2022-11-28 16:11:21 修改

阅读量935

点赞数

分类专栏：头歌文章标签： html css 前端

于 2022-11-28 15:43:42 首次发布

本文链接：https://blog.csdn.net/m0_53450409/article/details/128081104

版权

第三关

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

编程要求

在右侧编辑器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;