Multiple Pull to Refresh Instances in Tabbed Layout


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 = '' + 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>' +
    // Prepend new list element
    // 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! :slight_smile:

Посмотри, сколько у тебя элементов .ptr-content в DOM
В компоненте роутера: this.$el.find(‘.ptr-content’)

Yes, apply individual event listeners to specific elements

Sorry for the late update, but thanks for the replies. What worked for my case is having only on PTR active at one time (via .create() and .destroy()) and giving a different name for each PTR instance.

Thanks! :slight_smile:

Hi, Can you maybe show me an example of how you did it? I am stuck with the same problem as you. Thanks in advance!