jQuery封装H5手机端滚动到底部加载更多分页,且在请求时间内结束前只执行一次

要做需要SEO的手机网站,只切图,剩下的交给后端去对接功能。感觉终于扬眉吐气了一回~~
好像没做网站了,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);

})






暧昧贴

发表评论

    微笑 大笑 拽 大哭 奸笑 流汗 喷血 生气 囧 不爽 晕 示爱 卖萌 吃惊 迷离 爱你 吓死了 呵呵