jQuery封装H5手机端滚动到底部加载更多分页，且在请求时间内结束

关于jQuery封装H5手机端滚动到底部加载更多分页，且在请求时间内结束以下文字资料是由3搜网小编为大家搜集整理后发布的内容，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jQuery封装H5手机端滚动到底部加载更多分页，且在请求时间内结束”文章吧。

上拉/上滑加载更多

下面贴上封装的滚动到底部加载更多的方法，请求时间只请求一次也封装好了。

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);
 
})

以上就是关于“jQuery封装H5手机端滚动到底部加载更多分页，且在请求时间内结束”这篇文章的内容，希望分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注3搜网技术频道。