一、分析
下拉加载技术使用的是窗口滚动条滚动触发事件，当滚动条下拉到底部后，就发送ajax，请求下一页的内容，将其添加到当前列表页中，由于要请求新的内容，还需要几个控制变量：当前页码、页码总数，如果当前页面小于页码总数就可以发送请求，如果大于等于，就到最底部了，就不能发送了。
二、前端代码(jQuery、javascript模板字符串)
index.html
<nav class="news-nav"> <ul class="clearfix"> <li class="active"><a href="javascript:void(0)">最新资讯</a></li> {% for tag in tags %} <li><a href="javascript:void(0)" data-id="{{ tag.id }}">{{ tag.name }}</a></li> {% endfor %} </ul> </nav> <!-- news-nav end --> <!-- news-contain start --> <div class="news-contain"> <ul class="news-list"> <li class="news-item"> <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail" target="_blank"> <img src="../../static/images/linux.jpg" alt="linux查找文件或目录命令" title="linux查找文件或目录命令"> </a> <div class="news-content"> <h4 class="news-title"><a href="#">linux查找文件或目录命令</a> </h4> <p class="news-details">linux查找文件或目录命令，前提：知道文件或者目录的具体名字，例如：sphinx.conffind 查找find / -name dirname 查找目录find -name...</p> <div class="news-other"> <span class="news-type">Linux教程</span> <span class="news-time">11/11 18:24</span> <span class="news-author">python</span> </div> </div> </li> <li class="news-item"> <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail" target="_blank"> <img src="../../static/images/linux.jpg" alt="linux下svn命令的使用" title="linux下svn命令的使用"> </a> <div class="news-content"> <h4 class="news-title"><a href="https://www.shiguangkey.com/course/2432/887">linux下svn命令的使用</a> </h4> <p class="news-details">1、将文件checkout到本地目录svn checkout path（path是服务器上的目录） 例如：svn checkout svn://192.168.1.1/pro/domain 简写：svn co2、往版本库中添加新的文件 svn addfile 例如：svn add te...</p> <div class="news-other"> <span class="news-type">Linux教程</span> <span class="news-time">11/11 18:24</span> <span class="news-author">python</span> </div> </div> </li> <li class="news-item"> <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail" target="_blank"> <img src="../../static/images/linux.jpg" alt="实现linux和windows文件传输" title="实现linux和windows文件传输"> </a> <div class="news-content"> <h4 class="news-title"><a href="https://www.shiguangkey.com/course/2432/886">实现linux和windows文件传输</a> </h4> <p class="news-details"> 其实这个题目有点大，这里介绍的只是linux和windows文件传输中的一种，但是这种方法却非常实用，那就是：ZModem协议具体是linux命令是：rz...</p> <div class="news-other"> <span class="news-type">Linux教程</span> <span class="news-time">11/11 18:24</span> <span class="news-author">python</span> </div> </div> </li> <li class="news-item"> <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail" target="_blank"> <img src="../../static/images/linux.jpg" alt=".htaccess配置详解" title=".htaccess配置详解"> </a> <div class="news-content"> <h4 class="news-title"><a href="https://www.shiguangkey.com/course/2432">.htaccess配置详解</a> </h4> <p class="news-details"> .htaccess文件设置基础教程 如果你设置好了比如常用的404页面 301重定向 页面还有500页面等会设置了 无非对你的seo技术有很大帮助那么 .htaccess文件到底怎么设置呢 - .htaccess 文件(或者"分布式...</p> <div class="news-other"> <span class="news-type">Linux教程</span> <span class="news-time">11/11 18:24</span> <span class="news-author">python</span> </div> </div> </li> <li class="news-item"> <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail" target="_blank"> <img src="../../static/images/linux.jpg" alt="使用nohup命令让linux程序后台运行" title="使用nohup命令让linux程序后台运行"> </a> <div class="news-content"> <h4 class="news-title"><a href="https://www.shiguangkey.com/course/2432">使用nohup命令让linux程序后台运行</a> </h4> <p class="news-details">使用nohup让程序永远后台运行Unix/Linux下一般比如想让某个程序在后台运行，很多都是使用 & 在程序结尾来让程序自动运行。比如我们要运行mysql在后台：/usr/local/mysql/bin/mysqld_safe --user=mysql &但是...</p> <div class="news-other"> <span class="news-type">Linux教程</span> <span class="news-time">11/11 18:24</span> <span class="news-author">python</span> </div> </div> </li> </ul> </div>
三、后端代码
$(function () { // 新闻列表功能 let $newLi = $(".news-nav ul li"); // 默认第一页 let iPage = 1; // 默认总页数 let iTotalPage = 1; // 默认分类标签 let sCurrentTagId = 0; // 是否向后台加载数据 let bIsLoadData = true; fn_load_content(); $newLi.click(function () { $(this).addClass("active").siblings("li").removeClass("active"); let sClickTagId = $(this).children('a').attr('data-id'); if(sClickTagId !== sCurrentTagId){ sCurrentTagId = sClickTagId; iPage = 1; iTotalPage = 1; fn_load_content(); } }); // 页面滚动加载 $(window).scroll(function () { // 浏览器窗口高度 let showHeight = $(window).height(); // 整个网页的高度 let pageHeight = $(document).height(); // 页面可以滚动的距离 let canScrollHeight = pageHeight - showHeight; // 页面滚动了多少，这个是随着页面滚动实时变化的 let nowScroll = $(document).scrollTop(); if((canScrollHeight - nowScroll) < 100){ if(!bIsLoadData){ bIsLoadData = true; // 如果当前页数据小于总页数，那么才去加载数据 if(iPage < iTotalPage){ iPage += 1; $(".btn-more").remove(); // 加载数据 fn_load_content(); } else{ message.showInfo("已全部加载，没有更多内容！"); $(".btn").remove(); $(".news-list").append($('<a href="javascript:void(0);" class="btn-more">已全部加载，没有更多内容！</a>')) } } } }); // 定义向后端获取新闻列表数据的请求 function fn_load_content() { // 创建请求参数 let sDataParams = { "tag_id": sCurrentTagId, "page": iPage } // 创建ajax请求 $.ajax({ url: "/news/", type: "GET", data: sDataParams, dataType: "json" }) .done(function (res) { if(res.errno === "0"){ iTotalPage = res.data.total_page; if(iPage === 1){ $(".news-list").html("") } res.data.news.forEach(function (one_news) { let content = ` <li class="news-item"> <a href="/news/${one_news.id}/" class="news-thumbnail" target="_blank"> <img src="${one_news.image_url}" alt="${one_news.title}" title="${one_news.title}"> </a> <div class="news-content"> <h4 class="news-title"><a href="/news/${one_news.id}/">${one_news.title}</a></h4> <p class="news-details">${one_news.digest}</p> <div class="news-other"> <span class="news-type">${one_news.tag_name}</span> <span class="news-time">${one_news.update_time}</span> <span class="news-author">${one_news.author}</span> </div> </li>`; $(".news-list").append(content); }); $(".news-list").append($('<a href="javascript:void(0);" class="btn-more">滚动加载更多</a>')); bIsLoadData = false; } else{ message.showError(res.errmsg); } }) .fail(function () { message.showError('服务器超时，请重试！'); }) } })
index_view.py
def ResultResponse(errno=Code.OK, errmsg='', data=None, **kwargs):
json_dict = {'errno': errno, "errmsg": errmsg, 'data': data}
if kwargs:
json_dict.update(kwargs)
return JsonResponse(json_dict)
def get_news_list(request): try: tag_id = int(request.GET.get("tag_id", 0)) except Exception as e: logger.error("分类错误{}".format(e)) tag_id = 0 try: page = int(request.GET.get("page", 1)) except Exception as e: logger.error("页面错误{}".format(e)) page = 1 news_list = News.objects.values("title", "digest", "image_url", "update_time", "id").annotate(tag__name= F("tag__name"), author= F('author__username')) news_info = news_list.filter(is_delete=False, tag_id=tag_id) or news_list.filter(is_delete=False) pages = Paginator(news_info, 5) try: news = pages.page(page) except Exception as e: logger.error("分页数据不存在{}".format(e)) news = pages.page(pages.num_pages) total_page = pages.num_pages data = { "news": list(news), "total_page": total_page, } return ResultResponse(data=data)