You need to all Pull to refresh logic for home page in its page:init handler. Otherwise as soon it will be loaded again, all your previous code that is specified in global scope will not work
Because you add handler AFTER page:init event happend for home page. Add this handlers BEFORE you do new Framework7 or pass it in app events handlers in on parameters or in home page route parameters
Apparently, this $$(’.ptr-content’); targets all divs with ptr-content class. If you do it in page:init event than you need to target it correctly, e.g.:
$$(document).on('page:inti', '.page[...]', function (e, page) {
var $ptrContent = page.$el.find('.ptr-content');
...
});
i am facing the same problem. i have to implement this on multiple pages. on home page. it works fine but if navigate to another page and then come back, it refreshes infinite while on other pages it refreshes infinite. i mean preloader becomes visible. kindly correct me where i am going wrong.
$$(document).on("page:init", function (e, page) {
if (
app.views.main.router.url == "/homepage/" ||
app.views.main.router.url == "/newssummary/" ||
app.views.main.router.url == "/expenses/" ||
app.views.main.router.url == "/ordersunits/" ||
app.views.main.router.url == "/products/"
) {
//pull to refresh
var $ptrContent = page.$el.find('.ptr-content');
// Add 'refresh' listener on it
$ptrContent.on("ptr:refresh", function (e) {
// Emulate 2s loading
setTimeout(function () {
console.log("refresh data here");
app.ptr.done(); // or e.detail();
}, 2000);
});
}
it is resolved by just changing app.ptr.done() to e.detail()