无限滚动加载(第一次请求完成后才发第二次请求)

var time1;
var srcollOld = 0,srcollNow = 0,scrollFun = false;
$(window).scroll(function () {
   //$(window).scrollTop()这个方法是当前滚动条滚动的距离
   //$(window).height()获取当前窗体的高度
   //$(document).height()获取当前文档的高度
   
    var bot = 50;  //bot是底部距离的高度
    if ((bot  +  $(window).scrollTop() )  >=  ($(document).height() - $(window).height())) {
          srcollNow = $(window).scrollTop();
          if(srcollNow >= srcollOld){
              if(!scrollFun){
              //第一次请求完成后才发第二次请求
                  scrollFun = true;
                  clearTimeout(time1);
                  time1=window.setTimeout(function(){
                      loadAjax()
                  },500);
              }
          }
          srcollOld = srcollNow;
      }
});

function loadAjax(){
    $.ajax({
        url: url,
        type: type,
        success:function (data) {
            scrollFun = false;
            if (data.success == true) {
            }else{
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            scrollFun = false;
        }
    });
}

VUE 滚动到底部加载数据

<div class='list' ref="viewBox"></div>
 mounted(){
      this.$refs.viewBox.addEventListener('scroll', this.loadingMore, false);
      this.getActivtyList()
  },
  methods: {  
    getActivtyList(){
    },
    loadingMore(){
      //变量scrollTop是滚动条滚动时,距离顶部的距离
      var scrollTop = this.$refs.viewBox.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight = this.$refs.viewBox.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight = this.$refs.viewBox.scrollHeight;
      //滚动条到底部的条件
      if(scrollTop+windowHeight==scrollHeight){
        //写后台加载数据的函数
        console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
        if(Math.ceil(this.total/this.pageSize) > this.pageNo){
          this.pageNo += 1;
          this.getActivtyList()
        }
      }
    }
  }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值