diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index cfdfb54eee..de758f092a 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -603,7 +603,7 @@ export class IonRange {
proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value']);
export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {}
-@Component({ selector: 'ion-refresher', changeDetection: 0, template: '', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })
+@Component({ selector: 'ion-refresher', changeDetection: 0, template: '', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'pullFactor', 'disabled'] })
export class IonRefresher {
ionRefresh!: EventEmitter;
ionPull!: EventEmitter;
@@ -616,7 +616,7 @@ export class IonRefresher {
}
}
proxyMethods(IonRefresher, ['complete', 'cancel', 'getProgress']);
-proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled']);
+proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'pullFactor', 'disabled']);
export declare interface IonRefresherContent extends StencilComponents<'IonRefresherContent'> {}
@Component({ selector: 'ion-refresher-content', changeDetection: 0, template: '', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] })
diff --git a/core/api.txt b/core/api.txt
index 0dd73c9e43..77c00ee550 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -841,6 +841,7 @@ ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,fal
ion-refresher,none
ion-refresher,prop,closeDuration,string,'280ms',false,false
ion-refresher,prop,disabled,boolean,false,false,false
+ion-refresher,prop,pullFactor,number,1,false,false
ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
ion-refresher,prop,pullMin,number,60,false,false
ion-refresher,prop,snapbackDuration,string,'280ms',false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 6736face67..e7cd33756b 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3519,6 +3519,10 @@ export namespace Components {
*/
'getProgress': () => Promise;
/**
+ * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.
+ */
+ 'pullFactor': number;
+ /**
* The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
*/
'pullMax': number;
@@ -3553,6 +3557,10 @@ export namespace Components {
*/
'onIonStart'?: (event: CustomEvent) => void;
/**
+ * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.
+ */
+ 'pullFactor'?: number;
+ /**
* The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
*/
'pullMax'?: number;
diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md
index 8255390fd1..e7c00241b9 100644
--- a/core/src/components/refresher/readme.md
+++ b/core/src/components/refresher/readme.md
@@ -25,6 +25,13 @@ refresher.
+
+
+
+
+
+
+
@@ -71,6 +78,13 @@ export class RefresherExample {
+
+
+
+
+
+
+
@@ -110,6 +124,13 @@ const Example: React.SFC<{}> = () => (
+ {/*-- Custom Refresher Properties --*/}
+
+
+
+
+
+
{/*-- Custom Refresher Content --*/}
@@ -139,14 +160,21 @@ export default Example
+
+
+
+
+
+
+
+ pulling-icon="arrow-dropdown"
+ pulling-text="Pull to refresh"
+ refreshing-spinner="circles"
+ refreshing-text="Refreshing...">
@@ -174,13 +202,14 @@ export default Example
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- |
-| `closeDuration` | `close-duration` | Time it takes to close the refresher. | `string` | `'280ms'` |
-| `disabled` | `disabled` | If `true`, the refresher will be hidden. | `boolean` | `false` |
-| `pullMax` | `pull-max` | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. | `number` | `this.pullMin + 60` |
-| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. | `number` | `60` |
-| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to to snap back to the `refreshing` state. | `string` | `'280ms'` |
+| Property | Attribute | Description | Type | Default |
+| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- |
+| `closeDuration` | `close-duration` | Time it takes to close the refresher. | `string` | `'280ms'` |
+| `disabled` | `disabled` | If `true`, the refresher will be hidden. | `boolean` | `false` |
+| `pullFactor` | `pull-factor` | How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved. | `number` | `1` |
+| `pullMax` | `pull-max` | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. | `number` | `this.pullMin + 60` |
+| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. | `number` | `60` |
+| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to to snap back to the `refreshing` state. | `string` | `'280ms'` |
## Events
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 3341fdfb2e..dda91db099 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -58,6 +58,19 @@ export class Refresher implements ComponentInterface {
*/
@Prop() snapbackDuration = '280ms';
+ /**
+ * How much to multiply the pull speed by. To slow the pull animation down,
+ * pass a number less than `1`. To speed up the pull, pass a number greater
+ * than `1`. The default value is `1` which is equal to the speed of the cursor.
+ * If a negative value is passed in, the factor will be `1` instead.
+ *
+ * For example: If the value passed is `1.2` and the content is dragged by
+ * `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels
+ * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
+ * will be `8` pixels, less than the amount the cursor has moved.
+ */
+ @Prop() pullFactor = 1;
+
/**
* If `true`, the refresher will be hidden.
*/
@@ -188,7 +201,7 @@ export class Refresher implements ComponentInterface {
// this method can get called like a bazillion times per second,
// so it's built to be as efficient as possible, and does its
// best to do any DOM read/writes only when absolutely necessary
- // if multitouch then get out immediately
+ // if multi-touch then get out immediately
const ev = detail.event as TouchEvent;
if (ev.touches && ev.touches.length > 1) {
return;
@@ -201,7 +214,8 @@ export class Refresher implements ComponentInterface {
return;
}
- const deltaY = detail.deltaY;
+ const pullFactor = (Number.isNaN(this.pullFactor) || this.pullFactor < 0) ? 1 : this.pullFactor;
+ const deltaY = detail.deltaY * pullFactor;
// don't bother if they're scrolling up
// and have not already started dragging
if (deltaY <= 0) {
diff --git a/core/src/components/refresher/usage/angular.md b/core/src/components/refresher/usage/angular.md
index 5c8e0b444f..c1f63b5979 100644
--- a/core/src/components/refresher/usage/angular.md
+++ b/core/src/components/refresher/usage/angular.md
@@ -6,6 +6,13 @@
+
+
+
+
+
+
+
diff --git a/core/src/components/refresher/usage/javascript.md b/core/src/components/refresher/usage/javascript.md
index e2f9f47aa3..825bc59391 100644
--- a/core/src/components/refresher/usage/javascript.md
+++ b/core/src/components/refresher/usage/javascript.md
@@ -6,6 +6,13 @@
+
+
+
+
+
+
+
diff --git a/core/src/components/refresher/usage/react.md b/core/src/components/refresher/usage/react.md
index 1841d6442b..29f26e5cfd 100644
--- a/core/src/components/refresher/usage/react.md
+++ b/core/src/components/refresher/usage/react.md
@@ -21,6 +21,13 @@ const Example: React.SFC<{}> = () => (
+ {/*-- Custom Refresher Properties --*/}
+
+
+
+
+
+
{/*-- Custom Refresher Content --*/}
diff --git a/core/src/components/refresher/usage/vue.md b/core/src/components/refresher/usage/vue.md
index 593bc4b511..61c8f89936 100644
--- a/core/src/components/refresher/usage/vue.md
+++ b/core/src/components/refresher/usage/vue.md
@@ -7,14 +7,21 @@
+
+
+
+
+
+
+
+ pulling-icon="arrow-dropdown"
+ pulling-text="Pull to refresh"
+ refreshing-spinner="circles"
+ refreshing-text="Refreshing...">