js 实现简单的下拉加载更多

当用户浏览到页面底部时候，自动加载下一页的内容

let allProductData = [] //全部的数据
let productData = [] //要渲染的数据
let listQuery = {currPage: 1,pageSize: 10
}function queryData(){//数据处理
productData = allProductData.slice((listQuery.currPage-1) * listQuery.pageSize, listQuery.currPage * listQuery.pageSize) listQuery.currPage++;// 及时更新视图bindHTML();
}
function getAllData(){let xhr = new XMLHttpRequest();xhr.open('get', './json/data.json', false);xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {allProductData = JSON.parse(xhr.responseText).RECORDS;// 初始化列表数据  并渲染视图queryData();}}xhr.send(null);}

window.onscroll = function() {// 文档内容实际高度（包括超出视窗的溢出部分）var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);console.log(scrollHeight)//滚动条滚动距离var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;console.log(scrollTop)//窗口可视范围高度var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);console.log(clientHeight)if (clientHeight + scrollTop >= scrollHeight) {queryData();}
}

js 实现简单的下拉加载更多相关推荐

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. ...
移动端下拉加载更多DEMO(纯js实现)
首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判断滚动条滚到底呢? 当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时,说明滚 ...
织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...
织梦dedecms实现点击下拉加载更多主要用到ajax技术.具体步骤如下: 一.首先找到并打开/plus/list.PHP文件,在里面找到如下代码: require_once(dirname(__FI ...
html5页面下拉加载更多_使您的产品页面销售更多的5条提示
html5页面下拉加载更多 Getting visitors to your website requires a great deal of work and, for many businesse ...
html下拉自动加载更多,H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件还可以,但是 ...
IM 聊天页面下拉加载更多--类似微信顺滑展示
背景领导在会议上说我们的 IM 聊天页面的用户体验不太好,尤其是下拉加载更多会跳动,让我优化一下.之前还确实没有注意到这一点,现场拿出手机和微信做对比,不比不知道,一比还真是发现了问题.微信 ...
H5 下拉加载更多(模拟微信聊天记录）
前言前段时间用H5实现一个实时聊天的功能.发现很难实现像微信聊天记录一样下拉加载更多记录.市面上大部分的 Web 项目实现的效果都是上拉加载,下拉刷新.下拉加载更多很少见,下拉在加载数据方面与上拉是 ...
下拉加载更多--判断页面距离
2019独角兽企业重金招聘Python工程师标准>>> /* *下拉加载更多使用 *底部小于50返回false--加载,否则不加载 * */ function lowEnough() ...
ant-design-vue select 可搜索下拉加载更多
1.搜索配置 showSearch 属性,支持单选模式可搜索. filterOption 是否根据输入项进行筛选. 当其为一个函数时,会接收 inputValue option 两个参数,当 opt ...

js 实现简单的下拉加载更多

js 实现简单的下拉加载更多相关推荐

最新文章

热门文章