个人中心
gpt4 book ai didi

JavaScript实现滚动加载更多

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 38 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JavaScript实现滚动加载更多由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

vscode 。

JavaScript实现滚动加载更多

index

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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~" )
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/QZ9420/article/details/110353744 。

最后此篇关于JavaScript实现滚动加载更多的文章就讲到这里了,如果你想了解更多关于JavaScript实现滚动加载更多的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

38 4 0
文章推荐： linux线程的取消(终止)方法
文章推荐： 啥是 MySQL 事务隔离级别？
文章推荐： PHP实现随机发放扑克牌
文章推荐： SQL性能优化策略之联合索引优化方法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com