Skip to content

mobkits/pull-to-refresh

Repository files navigation

Pull-to-refresh

Build Status Coverage Status

A pull to refresh component for developers who loves elegence solution.

Now works with webpack and browserify, it's supposed to works with iscroll-component

To make them works reansonable, they are decoupled in 1.0.0

demo. code of demo

Features

  • Call refresh as you need.
  • Simplified code and API.
  • Works with promise

Installation

Prefer to install with npm:

$ npm install pull-to-refresh

Install with component(1):

$ component install chemzqm/pull-to-refresh

Example

.scrollable {
  position: fixed;
  top: 50px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
<div id="demo" class="scrollable">
  <div>
    <ul>
      <li></li>
    </ul>
  </div>
</div>

Notice the scrollable must have a single child for iscroll-component to work

var el = document.getElementById('demo')
var Ptr = require('pull-to-refresh')
var is = Iscroll(el, { handlebar: true })
var ptr = new Ptr(el, function() {
    return ajax_and_prepend_dom( ) // refresh your data, should return promise
  })
})

You can think iscroll just add nagetive scrollTop value to the scrollable.

API

Ptr(el, [option], callback)

  • el the scrollable element
  • callback is called when loading start, the first argument which is a callback function should be called after the dom prepend to the list.
  • option.timeout for the request timeout in millisecond.
  • option.template contains a custom template(string or element) for the inserted element
  • option.timeout millisecond of request timeout, default 10000

.refresh()

Perform refresh (with animation scroll to top at first).

.unbind()

Unbind all event listeners

License

The MIT License (MIT)