html5到底部自动加载,列表滚动到底部自动加载更多

列表滚动到底部自动加载更多

在移动端，经常会用到列表滚动到底部，拉一下加载更多，或者点一下加载更多等等，今天我说说我的一个实现的思路。

通过监听列表的滚动时间，当用户滚动到列表的底部，并停留一小段时间，便认为用户想要加载下一页的数据，当用户滚回列表的顶部时，展示刷新的按钮，点击便可刷新。

以下是实现的思路，比较粗糙，欢迎各位朋友提出建议。

HTML代码

点击刷新
//列表*n
……

js代码

(function () {

var lastScrollTop = 0;

var timer = null;

document

.getElementById('cnt')

.addEventListener('scroll', function (e) {

if (timer) {

clearTimeout(timer);

timer = null;

}

var target = e.currentTarget;

var listCnt = document.getElementsByClassName('listCnt')[0];

var loadMore = document.getElementById('loadMore');

var curScrollTop = target.scrollTop;

var scrollDown = curScrollTop - lastScrollTop > 0;

var scrollUp = !scrollDown;

var targetHeight = target.offsetHeight;

var listCntHeight = listCnt.offsetHeight;

var isEnd = curScrollTop + targetHeight === listCntHeight;

var isTop = curScrollTop === 0;

if (isTop) {

//想要性能好点，可以加个定时器，不要每次滚到头部都刷新

return loadMore.style.display = 'block';

}

if (isEnd) {

//停留时间请根据实际情况调整

timer = setTimeout(function () {

//loadMoreFn

console.info('loadMore')

}, 2000)

}

loadMore.style.display = 'none';

});

})();

写得匆忙，以上代码没有考虑浏览器的兼容性问题，如：addEventListener等

html5到底部自动加载,列表滚动到底部自动加载更多相关推荐

Jetpack Compose 无限加载列表（滚到底部自动加载更多）
Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢? 两种方法可供选择: 基于 paging ...
php ajax 加载列表,Ajax点击不断加载数据列表（图文教程）
这篇文章主要介绍了Ajax点击不断加载数据列表的相关资料,需要的朋友可以参考下 Ajax简介 AJAX即"Asynchronous Javascript And XML"(异步Ja ...
1.RecyclerView设置clipToPadding=“false“，scrollbars无法跟随列表滚动到底部的解决方案
记录一下,工作遇到的一个问题 <?xml version="1.0" encoding="utf-8"?> <androidx.recycle ...
html+监听+页面滚动到底部,JS监听页面滚动到底部事件
敏捷开发之Scrum扫盲篇现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP... 为了不落后他人,于是我也开始学习Scrum,今天主要是对我最近阅读的相关资料,根据自己的理解, ...
滚动加载--优化滚动性能
背景最近有用阿里云 sdk 中的日志服务,在它的 api 里发现它并不支持分页查询,倒是有个 offset 指定日志起点,所以需要配合鼠标滚动做一个懒加载. 思路最容易想到的就是做一个底部检测,当 ...
小程序scroll-view，滚动到最低_小程序滚动到底部
小程序scroll-view,滚动到最低_小程序滚动到底部小程序滚动条,滚到最底部解决方案1 小程序滚动到底部使用Scorll-view实现方案: scrill-view:组件要固定高度. scro ...
html底部自动加载下一页,js页面滚动到底部时自动加载下一页数据
一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js . jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSize: 30, IsCom ...
[转]ListView滚动到底部自动加载数据
转自:http://blog.csdn.net/shineflowers/article/details/41744241 在Android中有很多时候会选择用ListView加载数据,有的是分批加载 ...
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
<script> export default {data() {return {pageIndex: 0,//页码pageSize: 10,//每次加载条数lock: false,//防 ...

html5到底部自动加载,列表滚动到底部自动加载更多

html5到底部自动加载,列表滚动到底部自动加载更多相关推荐

最新文章

热门文章