pulltorefresh.js 网页下拉刷新插件

发布于 2019-07-03 13:27:12 字数 7069 浏览 4517 评论 0

pulltorefresh.js 网页下拉刷新插件,让你的网站立马支持下拉刷新。这个东西简直了,超级有意思,加上几行代码之后,就可以让你的网站,在手机端支持下拉刷新效果。

一个小而强大的 JavaScript 库,专门为你的网页提供的下拉刷新功能。不需要HTML标记,提供了多个可选参数,效果高度可定制,不依赖任何第三方库。

安装

可以通过 NPM Registry, CDNJS or UNPKG 下载安装 pulltorefresh.js:

npm install pulltorefreshjs --save-dev
wget -O pulltorefresh.js https://unpkg.com/pulltorefreshjs

使用方法

引入 JS 文件,在网页初始化完成的时候调用:

const ptr = PullToRefresh.init({
  mainElement: 'body',
  onRefresh() {
    window.location.reload();
  },
});

bundler 可以使用 pulltorefreshjs 作为 commonjs 和 es6 模块语法:

import PullToRefresh from 'pulltorefreshjs';
// or
const PullToRefresh = require('pulltorefreshjs');

API

  • init(options) Will return a unique ptr-instance with a destroy() method.
  • destroyAll() Stop and remove all registered ptr-instances.
  • setPassiveMode(isPassive) Enable or disable passive mode for event handlers (new instances only).

Options

  • distThreshold (integer) Minimum distance required to trigger the refresh.
    — Defaults to 60
  • distMax (integer) Maximum distance possible for the element.
    — Defaults to 80
  • distReload (integer) After the distThreshold is reached and released, the element will have this height.
    — Defaults to 50
  • distIgnore (integer) After which distance should we start pulling?
    — Defaults to 0
  • mainElement (string) Before which element the pull to refresh elements will be?
    — Defaults to body
  • triggerElement (string) Which element should trigger the pull to refresh?
    — Defaults to body
  • ptrElement (string) Which class will the main element have?
    — Defaults to .ptr
  • classPrefix (string) Which class prefix for the elements?
    — Defaults to ptr--
  • cssProp (string) Which property will be usedto calculate the element's proportions?
    — Defaults to min-height
  • iconArrow (string) The icon for both instructionsPullToRefresh and instructionsReleaseToRefresh
    — Defaults to
  • iconRefreshing (string) The icon when the refresh is in progress.
    — Defaults to
  • instructionsPullToRefresh (string) The initial instructions string.
    — Defaults to Pull down to refresh
  • instructionsReleaseToRefresh (string) The instructions string when the distThreshold has been reached.
    — Defaults to Release to refresh
  • instructionsRefreshing (string) The refreshing text.
    — Defaults to Refreshing
  • refreshTimeout (integer) The delay, in milliseconds before the onRefresh is triggered.
    — Defaults to 500
  • getMarkup (function) It returns the default HTML for the widget, __PREFIX__ is replaced.
    — See src/lib/markup.js
  • getStyles (function) It returns the default CSS for the widget, __PREFIX__ is replaced.
    — See src/lib/styles.js
  • onInit (function) The initialize function.
  • onRefresh (function) What will the pull to refresh trigger? You can return a promise.
    — Defaults to window.location.reload()
  • resistanceFunction (function) The resistance function, accepts one parameter, must return a number, capping at 1.
    — Defaults to t => Math.min(1, t / 2.5)
  • shouldPullToRefresh (function) Which condition should be met for pullToRefresh to trigger?
    — Defaults to !window.scrollY

Use with React

With ReactDOMServer and renderToString() you can use components as icons instead of just strings. In this example we also use Font Awesome to get nice icons with animation, but you can use any React component you like.

Demo on codesandbox.io

import React, { Component } from 'react';
import ReactDOMServer from 'react-dom/server';
import PullToRefresh from 'pulltorefreshjs';
import { faSyncAlt} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

class App extends Component
{
  componentDidMount()
  {
    PullToRefresh.init({
      mainElement: 'body',
      onRefresh() {
        window.location.reload();
      },
      iconArrow: ReactDOMServer.renderToString(
        <FontAwesomeIcon icon={faSyncAlt} />
      ),
      iconRefreshing: ReactDOMServer.renderToString(
        <FontAwesomeIcon icon={faSyncAlt} spin={true} />
      ),
    });
  }
  
  componentWillUnmount() 
  {
    // Don't forget to destroy all instances on unmout
    // or you will get some glitches.
    PullToRefresh.destroyAll();
  }

  render()
  {
    return (
      <div>
        <h1>App</h1>
      </div>
    );
  }
}

export default App;

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。