mobile-pull-to-refresh: 移动端下拉刷新控件

Github: https://github.com/fenivana/p...

Pull to refresh

移动端下拉刷新控件. 体积小无依赖.

预览

请在手机版Chrome, Safari中查看, 或打开PC版Chrome DevTools的手机模拟器.

Material样式

Material样式2

iOS样式

如何使用

安装

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

引入JS和CSS (webpack 2)

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代码

请查看例子中的HTMl文件.

• Material style

• Material style 2

• iOS style

调用

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)
    })
  }
})

许可

MIT

友情鸣谢

• Material spinner by jczimm

• iOS spinner by Jianqiu Xiao

• Icons by Google

• Some css code from Muse UI