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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 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
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP 实现重载
2021/03/09 PHP
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JS与C#编码解码
2013/12/03 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
jupyter notebook清除输出方式
2020/04/10 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
C语言笔试集
2012/07/24 面试题
师范应届生求职信
2013/11/15 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
竞选学委演讲稿
2014/09/13 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
税务会计岗位职责
2015/04/02 职场文书
公积金具结保证书
2015/05/11 职场文书
道歉短信大全
2015/05/12 职场文书
保护动物的宣传语
2015/07/13 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript