jQuery封装H5手机端滚动到底部加载更多分页,且在请求时间内结束前只执行一次
要做需要SEO的手机网站,只切图,剩下的交给后端去对接功能。感觉终于扬眉吐气了一回~~
好像没做网站了,jQuery都写得有点陌生了~
下面贴上封装的滚动到底部加载更多的方法,请求时间只请求一次也封装好了。
调用方法
好像没做网站了,jQuery都写得有点陌生了~
下面贴上封装的滚动到底部加载更多的方法,请求时间只请求一次也封装好了。
const $scrollBottom = { num: 0, isScroll: true, scroll(callback) { if (!this.isScroll) return window.onload = e => { $(window).scroll(() => { const h = $(document.body).height(); const c = $(document).scrollTop(); const wh = $(window).height(); if (Math.ceil(wh + c) >= h) { this.num++ if (this.num === 1) { //执行底部事件 this.end() callback() } } }) } }, end() { this.num = 1 this.isScroll = false }, start() { this.num = 0 this.isScroll = true } }
调用方法
// 开始执行滚动到底部 $scrollBottom.scroll(function () { // 滚动到底部了 console.log('滚动到底部了,开始请求', ); // 开始请求 setTimeout(() => { console.log('模拟请求成功!', ); //请求结束 重新开始检测滚动到底部 , 没数据后 不执行start()方法 或者 执行 $scrollBottom.end() 禁用检测滚动到底部 $scrollBottom.start() }, 1000); })
发表评论