Hello,
I’m working on an app with tabbed interface, and I’m wondering how to best implement Pull to Refresh on every page. I got one on the homepage and it’s appears to conflict with the others. Is this how I should do it? Because it’s not working for me.
$$(document).on('page:init', '.page[data-name="chat"]', function (e) {
var $ptrContent = $('.ptr-content');
// Add 'refresh' listener on it
$ptrContent.on('ptr:refresh', function (e) {
// Emulate 2s loading
setTimeout(function () {
var picURL = 'http://lorempixel.com/88/88/abstract/' + Math.round(Math.random() * 10);
var song = songs[Math.floor(Math.random() * songs.length)];
var author = authors[Math.floor(Math.random() * authors.length)];
var itemHTML =
'<li class="item-content">' +
'<div class="item-media"><img src="' + picURL + '" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + song + '</div>' +
'</div>' +
'<div class="item-subtitle">' + author + '</div>' +
'</div>' +
'</li>';
// Prepend new list element
$ptrContent.find('ul').prepend(itemHTML);
// When loading done, we need to reset it
app.ptr.done(); // or e.detail();
}, 2000);
});
});
Would it help if I give each PTR intance their own classes? Like, instead of .ptr-content, I would also use .chat-ptr-content.
Thanks in advance! 