anima-scroll-plugin-load v1.0.0

README

Anima-Scroll 的上拉组件，暴露 onpull, onpullend, onload 事件，可以方便上拉加载更多的交互形式。

USAGE

import Scroll from 'anima-scroll';
import 'anima-scroll-plugin-load';
import render from 'render.atpl';

const scrollEl = document.querySelector('.am-scroll');
const scroll = new Scroll({
  scrollElement: scrollEl,
  noBounce: false,
}).init();

const loadTips = $('.am-update');
scroll.enablePlugin('load', {
  // 上拉过程的交互细节处理，上拉到一定距离再释放，会触发 onload 事件。
  onpull: state => {
    let message;
    // 如果已经加载了全部。
    if (!hasMore) {
      message = '已显示全部结果';
    } else if (state === 'pull') {
      message = '继续上拉';
    } else if (state === 'load') {
      message = '释放开始加载更多';
    }
    loadTips.html(message).show();
  },
  onpullend: function() {
    loadTips.hide();
  },
  // 加载数据
  onload: done => {
    if (!hasMore) {
      return done();
    }
    loadTips.html('正在加载...').show();
    request(url, resp => {
      render(resp);
      loadTips.hide();
      done();
    })
  },
});