mobile-pull-to-refresh

Pull to refresh

Usage no npm install needed!

<script type="module">
  import mobilePullToRefresh from 'https://cdn.skypack.dev/mobile-pull-to-refresh';
</script>

README

[ 中文 ]

Pull to refresh

Pull to refresh control for mobile web. Small and no dependencies.

Previews

You can checkout the demos in Chrome mobile, Safari mobile, or toggle the device simulator on in Chrome DevTools.

Material style:
Material style

Material style - colorful:
Material style - colorful

Material style 2:
Material style 2

Material style 2 - colorful:
Material style 2 - colorful

iOS style:
iOS style

How to use

Installing

npm install mobile-pull-to-refresh --save

Including JS and CSS (webpack)

import pullToRefresh from 'mobile-pull-to-refresh'

// Import the style you want

// Material
import ptrAnimatesMaterial from 'mobile-pull-to-refresh/dist/styles/material/animates'
import 'mobile-pull-to-refresh/dist/styles/material/style.css'

// Material 2
import ptrAnimatesMaterial2 from 'mobile-pull-to-refresh/dist/styles/material2/animates'
import 'mobile-pull-to-refresh/dist/styles/material2/style.css'

// iOS
import ptrAnimatesIos from 'mobile-pull-to-refresh/dist/styles/ios/animates'
import 'mobile-pull-to-refresh/dist/styles/ios/style.css'

HTML snippets

Please checkout the example html files:

Invoking

const destroyCb = pullToRefresh({
  container: document.querySelector('.container'),
  animates: ptrAnimatesMaterial,
  // animates: ptrAnimatesMaterial2,
  // animates: ptrAnimatesIos,

  refresh() {
    return new Promise(resolve => {
      // here to fetch the data and rerender the contents.
      setTimeout(resolve, 2000)
    })
  }
})

License

MIT

Credit to