1.1.2 • Published 7 years ago

vue-awesome-pulltorefresh v1.1.2

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

vue-awesome-pulltorefresh

English | 简体中文

A small, but powerful Javascript library crafted to power your webapp's pull to refresh feature. No markup needed, highly customizable and dependency-free!

Try the demo

How to use?

npm install vue-awesome-pulltorefresh

Example

<template>
  <div id="main">
    <header>
      <div class="wrap">
        <h1>Demo</h1>
      </div>
    </header>
    <div id="main">
      <div class="wrap">
      </div>
    </div>
  </div>
</template>

<script>
  import pulltorefresh from 'vue-awesome-pulltorefresh'
  export default {
    mounted(){
        pulltorefresh.init({
          mainElement: '#main',
            onRefresh: () => {
            // doSomeThing
            }
        })
    }
  }
</script>

API

API NameDescription
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

PropertyDescriptiontypedefault
distThresholdMinimum distance required to trigger the refresh.Number60
distMaxMaximum distance possible for the element.Number80
distReloadAfter the distThreshold is reached and released, the element will have this height.Number50
distIgnoreAfter which distance should we start pulling?Number0
mainElementBefore which element the pull to refresh elements will be?Stringbody
triggerElementWhich element should trigger the pull to refresh?Stringbody
ptrElementWhich class will the main element have?String.ptr
classPrefixWhich class prefix for the elements?Stringptr--
cssPropWhich property will be used to calculate the element's proportions?Stringmin-height
iconArrowThe icon for both instructionsPullToRefresh and instructionsReleaseToRefreshString
iconRefreshingThe icon when the refresh is in progress.String
instructionsPullToRefreshThe initial instructions stringString下拉可以刷新
instructionsReleaseToRefreshThe instructions string when the distThreshold has been reached.String松开立即刷新
instructionsRefreshingThe refreshing text.String刷新中...
refreshTimeoutThe delay, in milliseconds before the onRefresh is triggered.Number500
onInitThe initialize function.Functionpromise/callback/async
onRefreshWhat will the pull to refresh trigger? You can return a promiseFunctionwindow.location.reload()
resistanceFunctionThe resistance function, accepts one parameter, must return a number, capping at 1Functiont => Math.min(1, t / 2.5)
shouldPullToRefreshWhich condition should be met for pullToRefresh to trigger?Function!window.scrollY
passiveThis value will be passed as { passive: true or false } to touchmove listeners if passive-handlers are supportedBooleanfalse
1.1.2

7 years ago

1.1.0

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago