Fácil de tirar a la biblioteca de actualización con JavaScript puro-pulltorefresh. js

Vista prévia

Descripción

pulltorefresh. js es una biblioteca JavaScript ligera y personalizable que agrega la funcionalidad de extracción para actualizar (deslizar para actualizar) a sus páginas web con JavaScript puro.

Funcionamiento

Descargue e incluya el pulltorefresh. js en su página web.

<script src="pulltorefresh.js"></script>

Inicialice el PullToRefresh con algunas opciones.

PullToRefresh.init({

mainElement: '#main',

onRefresh: function() { alert('refresh') }
});

Personalice el elemento desencadenante.

PullToRefresh.init({

mainElement: '#main',

triggerElement: '.trigger',

onRefresh: function() { alert('refresh') }
});

Apoyo de promesa:

PullToRefresh.init({

mainElement: '#main', // above which element?

onRefresh: function(){


var promise = new Promise(



function(resolve, reject){




setTimeout(()=>{





resolve();





alert('refresh');




}, 1500);



}


);


return promise;

}
});

Todas las opciones predeterminadas.

// Minimum distance required to trigger the refresh
distTreshold: 60,

// Maximum distance possible for the element
distMax: 80,

// After the distTreshold is reached and released, the element will have this height
distReload: 50,

bodyOffset: 20,

// Before which element the pull to refresh elements will be
mainElement: 'body',

// Which element should trigger the pull to refresh
triggerElement: 'body',

// What class will the main element have?
ptrElement: '.ptr',

// What class prefix for the elements?
classPrefix: 'ptr--',

// What property will be used to calculate the element's proportions?
cssProp: 'min-height',

// The icon for both instructionsPullToRefresh and instructionsReleaseToRefresh
iconArrow: '⇣',

// The icon when the refresh is in progress.
iconRefreshing: '…',

// The initial instructions string.
instructionsPullToRefresh: 'Pull down to refresh',

// The instructions string when the distTreshold has been reached.
instructionsReleaseToRefresh: 'Release to refresh',

// The refreshing text.
instructionsRefreshing: 'Refreshing',

// The delay, in milliseconds before the onRefresh is triggered.
refreshTimeout: 500,

// The initialize function.
onInit: function () {},

// What will the pull to refresh trigger? You can return a promise.
 onRefresh: function () { return location.reload(); },

// The resistance function, accepts one parameter, must return a number, capping at 1.
resistanceFunction: function (t) { return Math.min(1, t / 2.5); },

// Which condition should be met for pullToRefresh to trigger?
shouldPullToRefresh: function () { return !window.scrollY; }

Registro de cambios

12/19/2018

• v0.1.16

12/08/2018

• Corregir el mal-alcance; Limpieza

10/02/2018

• Compile archivos y correcciones menores

09/08/2018

• v0.1.14: minor fixes