1.1.2 • Published 7 years ago
vue-awesome-pulltorefresh v1.1.2
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 Name | Description |
---|---|
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
Property | Description | type | default |
---|---|---|---|
distThreshold | Minimum distance required to trigger the refresh. | Number | 60 |
distMax | Maximum distance possible for the element. | Number | 80 |
distReload | After the distThreshold is reached and released, the element will have this height. | Number | 50 |
distIgnore | After which distance should we start pulling? | Number | 0 |
mainElement | Before which element the pull to refresh elements will be? | String | body |
triggerElement | Which element should trigger the pull to refresh? | String | body |
ptrElement | Which class will the main element have? | String | .ptr |
classPrefix | Which class prefix for the elements? | String | ptr-- |
cssProp | Which property will be used to calculate the element's proportions? | String | min-height |
iconArrow | The icon for both instructionsPullToRefresh and instructionsReleaseToRefresh | String | ⇣ |
iconRefreshing | The icon when the refresh is in progress. | String | … |
instructionsPullToRefresh | The initial instructions string | String | 下拉可以刷新 |
instructionsReleaseToRefresh | The instructions string when the distThreshold has been reached. | String | 松开立即刷新 |
instructionsRefreshing | The refreshing text. | String | 刷新中... |
refreshTimeout | The delay, in milliseconds before the onRefresh is triggered. | Number | 500 |
onInit | The initialize function. | Function | promise/callback/async |
onRefresh | What will the pull to refresh trigger? You can return a promise | Function | window.location.reload() |
resistanceFunction | The resistance function, accepts one parameter, must return a number, capping at 1 | Function | t => Math.min(1, t / 2.5) |
shouldPullToRefresh | Which condition should be met for pullToRefresh to trigger? | Function | !window.scrollY |
passive | This value will be passed as { passive: true or false } to touchmove listeners if passive-handlers are supported | Boolean | false |