Code Monkey home page Code Monkey logo

drag-loading's Introduction

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相关样式。

drag-loading's People

Contributors

zhangxinxu avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.