tail-loader

1.0.1 • Public • Published

TailLoader

页尾自动加载

示例

最简实现页尾自动加载下一页

define(['TailLoader'], function (TailLoader) {
  var tailLoader = TailLoader({
    // 参数与$.ajax一致
    url: 'http://foobar.com/api',
    data: {
      page: 1
    },
    // success方法的作用域为tailLoader实例,相同的还有complete和error方法
    success: function (data) {
      // 向DOM加载新数据
      CONTAINER.append(RENDER(date));
      // 页数加一
      this.inc('page');
      if (this.data('page') < TOTAL) {
        // 还存在下一页时为tailLoader解锁,使其可以继续获取数据
        this.unlock();
      } else{
        // 否则tailLoader将被锁住不再响应页尾事件
        // 解绑页尾事件,释放资源
        this.unbind();
      }
    }
  });
});

推荐配置(页尾自动加载下一页)

define(['TailLoader'], function (TailLoader) {
  TailLoader({
    // 参数与$.ajax一致
    url: 'http://foobar.com/api',
    data: {
      page: 1
    },
    method: 'get',
    beforeSend: function () {
      // 显示加载状态提示
      LOADER.show();
    },
    // complete, error, success的上下文(this)为tailLoader
    complete: function () {
      // 隐藏加载状态提示
      LOADER.hide();
    },
    error: function (xml, status, err) {
      // 向用户告知错误信息
      ALERT(status);
      // 为tailLoader解锁,使其可以继续获取数据
      this.unlock();
    },
    success: function (data) {
      // 向DOM加载新数据
      CONTAINER.append(RENDER(date));
      // 页数加一
      this.inc('page');
      if (this.data('page') < TOTAL) {
        // 还存在下一页时为tailLoader解锁,使其可以继续获取数据
        this.unlock();
      } else {
        // 向用户告知已经是最后一页
        ALERT('this is the last page');
        // 解绑页尾事件,释放资源
        this.unbind();
      }
    }
  });
});

jQuery

你同样可以通过jQuery.tailLoader调用TailLoader。 注: 通过jQuery.tailLoader方法实现的尾加载将自动调用bindBottom方法。

define(['TailLoader'], function (TailLoader) {
  // $.tailLoader默认自动绑定页尾事件
  $.tailLoader({
    url: 'http://foobar.com/api',
    data: {
      page: 1
    },
    method: 'get',
    beforeSend: function () {
      LOADER.show();
    },
    complete: function () {
      LOADER.hide();
    },
    error: function (xml, status, err) {
      ALERT(status);
      this.unlock();
    },
    success: function (data) {
      CONTAINER.append(RENDER(date));
      this.inc('page');
      if (this.data('page') < TOTAL) {
        this.unlock();
      } else {
        ALERT('this is the last page');
        this.unbind();
      }
    }
  });
});

API

$.tailLoader(options, [bindBottom])

尾加载 for jQuery

Parameters

options: object,

[bindBottom]: boolean, 自动绑定尾部事件

Returns

TailLoader, loader

class TailLoader

Methods

TailLoader.fetch()

获取数据(可手动执行)

TailLoader.data(key)

获取某项data(发送到服务器的数据)

Parameters

key: string, 键名

Returns

对应值

TailLoader.data(key, value)

设置某项data(发送到服务器的数据)

Parameters

key: string, 键名

value: object, 值

Returns

this

TailLoader.inc(key, [step=1])

使data中某一值自增

Parameters

key: string, 键名

[step=1]: number, 增量

Returns

自增后的值

TailLoader.dec(key, [step=1])

使data中某一值自减

Parameters

key: string, 键名

[step=1]: number, 减量

Returns

自减后的值

TailLoader.unlock()

解锁

TailLoader.bindBottom()

手动绑定页尾事件

TailLoader.onscroll()

响应页面滚动事件的方法,通过bindBottom方法自动生成

TailLoader.unbind()

解绑页尾事件

License

MIT

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.1
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.1
    0
  • 1.0.0
    0

Package Sidebar

Install

npm i tail-loader

Weekly Downloads

0

Version

1.0.1

License

MIT

Last publish

Collaborators

  • yelo