使用JavaScript怎么编写一个滚动加载更多功能

这期内容当中小编将会给大家带来有关使用JavaScript怎么编写一个滚动加载更多功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

vscode

指数:

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; title> Title 　　,& lt; style> 　　,*{保证金:0;,填充:0;} 　　,li  {list-style:没有;} 　　,body {背景:# eee;} 　　,.wrapper {背景:# fff;宽度:,970 px;,保证金:20 px 汽车;,填充:,15 px;} 　　{,h2  text-align:中心;,边界底部:,1 px  solid  # ddd;, padding-bottom:, 20 px;} 　　,li {保证金:20 px  0;,边界底部:,1 px  dotted  # eee;, padding-bottom:, 20 px;} 　　{,p ,行高:25 px;} 　　,& lt;/style> 　　,& lt; https://www.yisu.com/zixun/script  src="/jquery-1.11.3.js "> 　　头 　　身体<> 　　

　　

新闻列表(加载更多)> <脚本文件。写(新的日期().toLocaleString())

　　

　　

　　

　　 　　

　　

　　<>脚本 　　让页面=1;//默认是第1页 　　让负荷=true; 　　函数getNewsList(页面){ 　　$("。页脚img)%20.attr%20("%20src%20"、"/timg.gif ") 　　负荷=false; 　　$ . get("/新闻",{页面},res=> {//console.log (res) 　　如果(res.news.length) { 　　让str=" ";//客户端渲染,客户端自己通过ajax获取数据,自已渲染数据 　　res.news.forEach(项=> { 　　str +=' 　　<李> 　　

$ {item.time}

　　

$ {item.summary}

　　李 　　” 　　}) 　　$ (“ul”) .append (str) 　　负荷=true; 　　其他}{ 　　$ (" .footer”)。html(”- - - - - - - - - - - - - - - -我是有底线的- - - - - - - - - - - - - - - - - -”) 　　负荷=false; 　　} 　　 　　}) 　　} 　　getNewsList(页面);//一上来就获取第1页的数据//判断出什么时候到底部 　　美元(文档)。滚动(函数(){ 　　让圣=$(窗口).scrollTop ();//卷上去的高度 　　让ch=$(窗口).height ();//一屏的高度 　　让dh=$(文档).height ();//整个文档(整个内容)的高度 　　如果((圣+ ch)>=dh & &负载){//滚动到了底部 　　getNewsList页面(+ +) 　　} 　　})> 　　

JS:

let  express =,要求(“express"); 　　let  path =,要求(“path"); 　　var  MongoClient =,要求(& # 39;mongodb # 39;) .MongoClient; 　　var  url =,“mongodb://localhost: 27017/? 　　 　　let  app =,表达();//,托管静态资源 　　app.use (express.static (path.resolve (__dirname,“。/public")))//,当访问/,响应一个html页面,不是渲染模板 　　app.get(“/?(要求,res)=祝辞{ 　　,res.sendFile (path.resolve (__dirname,“。/视图/index.html")) 　　})//,当访问/news 响应一个json数据//,如果一个路由,返回了一个Json数据,我们叫http://localhost: 3000/新闻是api接口//,api: 1)别人封装的方法,我们直接去调用,2)指一个url地址,叫api接口 　　app.get (“/news"(点播,res)=祝辞{ 　　,let  page =, req.query.page  | |, 1,,//,页表示当前是第几页 　　,//页面如果小于等于0 　　,(page  & lt;=, 0),,,, (=page  1) 　　 　　,//console.log(页面) 　　5,let  pageSize =,,,//,每页显示多少条 　　,let  offset =,(第1页)*页大小; 　　,MongoClient.connect (url,, {, useNewUrlParser: true },,函数(呃,,db), { 　　,if (错),throw 犯错; 　　,var  dbo =, db.db (“news"); 　　,dbo.collection (“newslist"); ({}) .skip(抵消).limit(页大小).toArray(函数(呃,,结果),{ 　　if 才能;(错),throw 犯错;//才能,console.log(结果);,//,获取每一页的数据 　　dbo.collection才能(“newslist") .count(),然后(result2=祝辞{//才能,result2表示一共有多少条数据 　　let 才能;total =, result2; 　　let 才能;size =, Math.ceil(时间/total 页大小)//,才能服务端渲染:,核心是使用模板引擎,jsp  php  asp //才能,是把模板和数据柔和在一起,形成一个有真实数据的页面,响应给客户端 　　res.json({才能 　　,,消息:结果, 　　,,,,//,总共多少条数据 　　页大小,,,,//,每页显示多少条 　　,,,,//,当前是第几页 　　,,,,//,一菜有多少页 　　})才能 　　,,}); 　　db.close才能(); 　　,}); 　　,}); 　　 　　}) 　　 　　app.listen(3000年,()=祝辞{ 　　,console.log(“3000,好吧~“) 　　})

使用JavaScript怎么编写一个滚动加载更多功能