All Projects → yued-fe → Drag Loading

yued-fe / Drag Loading

Licence: mit
基于窗体滚动的下拉释放加载或者刷新

Programming Languages

javascript
184084 projects - #8 most used programming language

drag-loading

基于窗体滚动的下拉释放加载或者刷新

如何使用

①. 引入JS文件,例如

<script src="drag-loading.js"></script>

②. 绑定

new DragLoading(el, {
	onReload: function() {
	    /** 执行刷新操作
	     * ... 
	    */

	    // loading下拉还原
	    this.origin();
    }
});

语法

new DragLoading(el, option);

其中:

  • el表示隐藏(height:0隐藏)在滚动窗体顶部的下拉元素;
  • option为可选参数,包括:
    • trigger,包装器对象,感受下拉操作的容器,默认为$('body')
    • maxY,数值,表示loading元素全部展开时候的高度值,也是触发onReload回调的边界高度,默认为40
    • onReload,函数,当下拉足够高时候触发的刷新回调方法,默认是空函数。

暴露属性和方法

{
	// el就是loading元素
	el: el,
	// reload回调方法
	callback: {
		reload: function() {}
	},
	// loading元素高度等UI还原
	origin: function() {},
	// 下拉阻尼处理,这个一般用不到
	damping: function () {}
}

补充tips

  • 本方法依赖jQuery.js或者Zepto.js。
  • 仅支持窗体滚动,普通元素下拉加载可以自行微调支持,很简单,把trigger和滚动窗体都改成这个可以滚动的普通元素即可。
  • loading元素默认高度0隐藏,然后本方法会对底边框进行设置,因此,不要使用border-bottom相关样式。
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].