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小实验之函数引用
Nov 17 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Python实现的RSS阅读器实例
2015/07/25 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
班主任个人工作反思
2014/04/28 职场文书
大学生求职计划书
2014/04/30 职场文书
公开承诺书格式
2014/05/21 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
大一学生个人总结
2015/02/15 职场文书