js页面滚动到底部时自动加载下一页数据

一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js 、 jquey.tmpl.js 支持

var Data = {
      PageCount: 1,
      PageSize: 30,
      IsCompleted: false,
      init: function(rows) { //初始化,载入第一页数据
        $(".list-item").detach();
        Data.IsCompleted = false;
        Data.load(1, rows);
      },
      setPage: function() { //数据载入成功,设置下一页索引
        var $page = $("#PageIndex");
        var index = parseInt($page.val()) + 1;
        $page.val(index);
      },
      scroll: function(page, rows) { //滚动到底部加载数据
        if (Data.IsCompleted) {
          return false;
        }
        var top = $(window).scrollTop();
        var win = $(window).height();
        var doc = $(document).height();
        if ((top + win) >= doc) {
          Data.load(page, rows);
        }
      },
      load: function(page, rows) { //载入数据方法
        $("#PageIndex").val(page);
        var chkSubject = $("#chkSubject").prop("checked"); 
        var chkContent = $("#chkContent").prop("checked");
        var logical = $('input:radio[name="rbtnLogical"]:checked').val();
	    var selectedTypeId = $("#hfdselectedId").val();

        var $msg = $('.load-btn');
        $msg.removeClass('load-more').text('正在载入数据...');
        $.ajax({
          url: "?pageindex=" + page + 
          "&pagesize=" + rows + 
          "&keywords=" + encodeURI($("#txtKeyWords").val()) + 
          "&chkSubject=" + chkSubject + 
          "&chkContent=" + chkContent + 
          "&logical=" + logical + 
          "&typeid=" + selectedTypeId + 
          "&t=" + (new Date().getTime()),
          type: "POST",
          success: function(json) {
            Data.PageCount = json.PageCount;
            var data = json.List;
            if (data != null && data.length > 0) {
              Data.append(data);
              if (Data.PageCount == page) {
                Data.IsCompleted = true;
                $msg.removeClass('load-more').text('已加载全部数据!');
                return true;
              }
              Data.setPage();
              $msg.addClass('load-more').text('查看更多');
              return true;
            }
            $msg.removeClass('load-more').text('已加载全部数据!');
            return false;
          },
          error: function (XMLHttpRequest, textStatus, errorThrown)  {
            $msg.removeClass('load-more').text('数据加载失败!点击重试。');
            alert(errorThrown + ":" + textStatus);
          }
        });
        return false;
      },
      append: function(json) { //构造html,并填充
        var $container = $('.table');
        $.each(json, function(i) {
          var html = $("#list-item-template").tmpl(json[i]);
          html.appendTo($container);
        });
      }
    };
	
    var $page = $("#PageIndex"); //页索引
        
    //初始化
    Data.init(Data.PageSize);
        
    //滚动加载
    $(window).scroll(function () {
      Data.scroll($page.val(), Data.PageSize);
    });
        
    //手动加载
    $(".load-btn").bind("click", function () {
      Data.load($page.val(), Data.PageSize);
    });
    //查询
    $("#btnSearch").bind("click", function () {
      Data.init(Data.PageSize);
    });

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
你可以使用Vant的`List`组件和Vue的`$refs`来实现滚动底部加载一页数据。具体步骤如下: 1. 在模板中使用`List`组件,并给它设置ref属性。 ```html <template> <van-list ref="list"> <!-- 列表内容 --> </van-list> </template> ``` 2. 在组件的`mounted`生命周期中给`List`组件绑定`scroll`事件。 ```javascript export default { mounted() { this.$refs.list.$el.addEventListener('scroll', this.handleScroll) }, methods: { handleScroll() { // 处理滚动事件 } } } ``` 3. 在`handleScroll`方法中判断是否滚动到了底部,如果滚动到了底部就触发加载一页的方法,然后将新数据添加到列表中。 ```javascript export default { data() { return { page: 1, // 当前页数 pageSize: 10, // 每页数据量 list: [], // 列表数据 loading: false, // 是否正在加载数据 finished: false // 是否已经加载完所有数据 } }, mounted() { this.$refs.list.$el.addEventListener('scroll', this.handleScroll) this.loadMore() }, methods: { handleScroll() { const list = this.$refs.list.$el const scrollHeight = list.scrollHeight const scrollTop = list.scrollTop const clientHeight = list.clientHeight if (scrollTop + clientHeight >= scrollHeight && !this.loading && !this.finished) { this.loadMore() } }, async loadMore() { this.loading = true const res = await fetch(`/api/list?page=${this.page}&pageSize=${this.pageSize}`) const data = await res.json() if (data.length === 0) { this.finished = true } else { this.list = [...this.list, ...data] this.page++ } this.loading = false } } } ``` 这样,当用户滚动列表底部,就会触发加载一页的操作,然后将新数据添加到列表中。注意在加载数据需要控制好`loading`和`finished`状态,避免重复加载数据加载完所有数据后继续加载

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

risingsun529

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值