JavaScript实现滚动加载更多


Posted in Javascript onDecember 27, 2020

本文实例为大家分享了JavaScript实现滚动加载更多的具体代码,供大家参考,具体内容如下

vscode

JavaScript实现滚动加载更多

index:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 * {margin:0; padding: 0;}
 li {list-style: none;}
 body {background: #eee;}
 .wrapper {background: #fff;width: 970px; margin:20px auto; padding: 15px;}
 h1 {text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 20px;}
 li {margin:20px 0; border-bottom: 1px dotted #eee; padding-bottom: 20px;}
 p { line-height: 25px;}
 </style>
 <script src="/jquery-1.11.3.js"></script>
</head>
<body>
 <div class="wrapper">
 <h1>新闻列表(加载更多)<script>document.write(new Date().toLocaleString())</script></h1>
 <ul>
 </ul>
 <div class="footer" style="text-align: center">
  <img style="width: 40px" src="" alt="">
 </div>
 </div>
 <script>
 let page = 1; // 默认是第1页
 let load = true;
 function getNewsList(page) {
  $(".footer img").attr("src","/timg.gif")
  load = false;
  $.get("/news",{page},res=>{
  // console.log(res)
  if(res.news.length){
   let str ="";
   // 客户端渲染,客户端自己通过ajax获取数据,自已渲染数据
   res.news.forEach(item=>{
   str += `
    <li>
    <h2><a href="#" rel="external nofollow" >${item.title}</a></h2>
    <p class="time">${item.time}</p>
    <p class="summary">${item.summary}</p>
    </li>
   `
   })
   $("ul").append(str)
   load = true;
  }else{
   $(".footer").html("--------------- 我是有底线的 --------------- ")
   load = false;
  }

  })
 }
 getNewsList(page); // 一上来就获取第1页的数据

 // 判断出什么时候到底部
 $(document).scroll(function () {
  let st = $(window).scrollTop(); // 卷上去的高度
  let ch = $(window).height(); // 一屏的高度
  let dh = $(document).height(); // 整个文档(整个内容)的高度
  if((st+ch) >= dh && load){
  // 滚动到了底部
  getNewsList(++page)
  }
 })
 </script>
</body>
</html>

JS:

let express = require("express");
let path = require("path");
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

let app = express();

// 托管静态资源
app.use(express.static(path.resolve(__dirname, "./public")))

// 当访问/ 响应一个html页面,不是渲染模板
app.get("/",(req,res)=>{
 res.sendFile(path.resolve(__dirname,"./views/index.html"))
})

// 当访问/news 响应一个json数据
// 如果一个路由,返回了一个Json数据,我们叫http://localhost:3000/news是api接口
// api:1)别人封装的方法,我们直接去调用 2)指一个url地址 叫api接口
app.get("/news",(req,res)=>{
 let page = req.query.page || 1; // page表示当前是第几页
 // page如果小于等于0
 (page <= 0) && (page = 1)

 // console.log(page)
 let pageSize = 5; // 每页显示多少条
 let offset = (page-1)*pageSize;
 MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
 if (err) throw err;
 var dbo = db.db("news");
 dbo.collection("newslist").find({}).skip(offset).limit(pageSize).toArray(function(err, result) {
  if (err) throw err;
  // console.log(result); // 获取每一页的数据
  dbo.collection("newslist").count().then(result2=>{
  // result2表示一共有多少条数据
  let total = result2;
  let size = Math.ceil(total / pageSize)
  // 服务端渲染: 核心是使用模板引擎 jsp php asp out
  // 是把模板和数据柔和在一起,形成一个有真实数据的页面,响应给客户端
  res.json({
   news:result,
   total, // 总共多少条数据
   pageSize, // 每页显示多少条
   page, // 当前是第几页
   size, // 一菜有多少页
  })
  });
  db.close();
 });
 });

})

app.listen(3000,()=>{
 console.log("3000 ok~")
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 学习之旅 (3)
Feb 05 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
jQuery实现简单轮播图效果
Dec 27 #jQuery
JavaScript实现瀑布流布局的3种方式
Dec 27 #Javascript
Vue实现省市区三级联动
Dec 27 #Vue.js
JavaScript实现通讯录功能
Dec 27 #Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 #Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 #Vue.js
在vue项目中封装echarts的步骤
Dec 25 #Vue.js
You might like
php实现无限级分类
2014/12/24 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Python函数式编程实例详解
2020/01/17 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
python中pyqtgraph知识点总结
2021/01/26 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
大专会计自我鉴定
2014/02/06 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
委托公证书范本
2014/04/03 职场文书
煤矿安全承诺书
2014/05/22 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
山楂树之恋观后感
2015/06/11 职场文书
暑期家教宣传单
2015/07/14 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
Django migrate报错的解决方案
2021/05/20 Python
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python