js分页加载更多

var GOODS = function() {
        this.container = $('#goodsList');
        this.domMore = $('#goodsMore');
        this.pageSize = 10;
        this.currentIndex = 0;
        this.isAjaxing = false;
        this.hasMore = true;
        this.h = document.documentElement.clientHeight;
        this.init();
      };

      GOODS.prototype =  {
        init: function() {
          var _self = this;

          _self.model();

          $(window).on('resize', function() {
            _self.winHeight = document.documentElement.clientHeight;
          });

          $(window).on('scroll', function() {
            if (_self.hasMore && !_self.isAjaxing) {
              if (_self.h - _self.domMore.get(0).getBoundingClientRect().top > 30) {
                _self.model();
              }
            }
          });
        },

        model: function() {
          var _self = this;

          _self.currentIndex += 1;

          _self.isAjaxing = true;

          _self.domMore.text('正在载入数据...');

          $.post('url', {
            pageIndex: _self.currentIndex,
            pageSize: _self.pageSize,
            pageId: '1145',
            d: (new Date().getTime() + Math.floor(Math.random() * 100))
          }, function(data) {
            _self.isAjaxing = false;

            if ('00' === data.code) {
              var list = data.result;

              list.length > 0 && _self.view(list);

              if (list.length < _self.pageSize) {
                _self.hasMore = false;
                if (1 == _self.currentIndex && 0 == list.length) {
                  _self.domMore.text('没有已上架的商品哦~');
                } else {
                  _self.domMore.text('没有更多了哦~');
                }
              } else {
                _self.domMore.text('上拉下载更多...');
              }
            } else {
              console.log(data.message);
            }

          }, 'json');
        },

        view: function(list) {
          var _self = this;
          var tpl = '';
          var len = list.length;
          for(var i = 0; i < len; i ++) {
            var item = list[i];
            if (item.stockQty > 0) {
              tpl += '';
            }
          }
          _self.container.append(tpl);
        }
      };

      new GOODS();
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`ag-Grid-Vue` 是一个基于 Vue.js 的 `ag-Grid` 的封装组件,它是 `ag-Grid`(一个功能强大的数据表格和网格组件库)在 Vue 框架中的实现。滚动条触底加载更多(Infinite Scroll or Virtual Scrolling)是 ag-Grid 提供的一种功能,用于在用户滚动到表格底部时自动加载更多行,而不是一次性加载所有数据,从而提高性能和用户体验。 在 ag-Grid-Vue 中实现滚动条触底加载更多的步骤通常包括: 1. 配置列:在 ag-Grid 的列定义中启用 `infiniteScroll` 属性,并设置 `scrollThreshold` 参数,指定当滚动到底部多少距离时触发加载。例如: ```html <ag-grid-vue :columnDefs="columnDefs" :infiniteScroll="true" scrollThreshold="100"></ag-grid-vue> ``` 这里 `100` 表示当滚动条距离底部小于100px时开始加载更多数据。 2. 数据分页:你需要确保数据源是分页的,可以使用 ag-Grid 的 `gridApi.getRowNode` 方法获取当前可视区域的行号范围,然后从后向前逐页加载。 3. 加载事件处理:在 Vue 组件中监听 `onGridReady` 或其他适当的事件,当滚动到底部时触发加载更多数据的请求,并更新数据源。示例: ```javascript mounted() { this.gridApi.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll(params) { if (params.isEnd && params.isLastRenderedPage) { // 加载更多数据 this.loadMoreData(); } }, loadMoreData() { // 假设你有一个接口 `loadNextPage` 用于请求更多数据 this.loadNextPage().then(() => { // 更新行数,告诉 ag-Grid 加载完成 this.gridApi.sizeColumnsToFit(); }); } } ``` 4. 更新视图:加载新数据后,你需要将其添加到现有数据的末尾,并调用 `gridApi.sizeColumnsToFit()` 来调整列宽以适应新的内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值