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 用记忆函数快速计算递归函数
Mar 15 Javascript
编程语言JavaScript简介
Oct 16 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 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中常用编辑器推荐
2007/01/02 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
discuz目录文件资料汇总
2014/12/30 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
React中的render何时执行过程
2018/04/13 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
Python Trie树实现字典排序
2014/03/28 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python处理中文标点符号大集合
2018/05/14 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Django如何批量创建Model
2020/09/01 Python
运动会通讯稿400字
2014/01/28 职场文书
公司户外活动总结
2014/07/04 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
学期个人自我总结
2015/02/13 职场文书
2015年档案室工作总结
2015/05/23 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
离婚财产分割协议书
2015/08/11 职场文书