https://github.com/apeatling/web-pull-to-refresh

A native-like JavaScript pull to refresh implementation for the web.
https://github.com/apeatling/web-pull-to-refresh

app javascript pull-to-refresh pulltorefresh web

Last synced: 1 day ago
JSON representation

A native-like JavaScript pull to refresh implementation for the web.

• Host: GitHub
• URL: https://github.com/apeatling/web-pull-to-refresh
• Owner: apeatling
• License: mit
• Created: 2014-11-04T01:19:32.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2019-05-18T22:56:07.000Z (over 5 years ago)
• Last Synced: 2024-12-15T19:10:21.836Z (8 days ago)
• Topics: app, javascript, pull-to-refresh, pulltorefresh, web
• Language: JavaScript
• Homepage: https://apeatling.com/articles/javascript-pull-to-refresh-web/
• Size: 112 KB
• Stars: 544
• Watchers: 11
• Forks: 92
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Pull to Refresh for the Web 1.1

===============================

![Web Pull to Refresh](https://apeatling.com/wp-content/uploads/2019/03/ptr-header1-1568x627.png)

This is a pull to refresh implementation for the web. It focuses on buttery UX performance and responsiveness to feel as close to a native implementation as possible.

[Try a Demo](https://apeatling.github.io/web-pull-to-refresh/) | [Read the Blog Post](https://apeatling.com/articles/javascript-pull-to-refresh-web/)

## Usage

There are two core elements needed, the content element and the pull to refresh UX element. The demo uses this setup, but you can modify this however you'd like.

```



  

  


  

  


    

    

    

  





  



```


This will work just fine with your own loading indicators or pull down arrow, just make sure they're wrapped in the element you're using to hold the pull to refresh UX. Don't forget to include the CSS if you want to use a similar visual setup as the demo.

In order for this to function, you'll need to load both Hammer.js and the wptr.js script, and then initialize the WebPullToRefresh module. Add this just before the closing body tag:

```

  window.onload = function() {

    WebPullToRefresh.init( {

      loadingFunction: exampleLoadingFunction

    } );

  };

```

You will also need to provide a loading function at initization time. This function should perform the async loading pieces you need to load new items, and return a promise.

```

var exampleLoadingFunction = function() {

  return new Promise( function( resolve, reject ) {

    // Run some async loading code here

    if ( /* if the loading worked */ ) {

      resolve();

    } else {

      reject();

    }

  } );

};

```

### Optional Parameters

There are a few optional parameters you can pass on initialization:

```

{

	// ID of the element holding dragable content area

	contentEl: 'content', 

	// ID of the element holding pull to refresh loading area

	ptrEl: 'ptr', 

	// Number of pixels of dragging down until refresh will fire

	distanceToRefresh: 70, 

  // The dragging resistance level, the higher the more you'll need to drag down.

  resistance: 2.5

}

```

[Try a Demo](https://apeatling.github.io/web-pull-to-refresh/) | [Read the Blog Post](https://apeatling.com/articles/javascript-pull-to-refresh-web/)