anima-scroll-plugin-load
v1.0.0
Published
pull to load plugin for anima scroll
Downloads
3
Readme
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();
})
},
});