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

時間 2019-12-05

標籤 mobile pull refresh 移動下拉刷新控件欄目無線简体版

原文原文鏈接

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

Pull to refresh

移動端下拉刷新控件. 體積小無依賴.html

預覽

請在手機版Chrome, Safari中查看, 或打開PC版Chrome DevTools的手機模擬器.webpack

Material樣式ios

Material樣式2git

iOS樣式github

如何使用

安裝

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文件.web

調用

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