How to use ptr-content refresh in a view

Questions
1

I’ve attempted many variations but I cannot figure out how to process ptr:refresh (or refresh) inside my view. I have a page with a list defined as:

data() {
  return {
    offers: [],
    activeTab: 'ALL',
  };
},
mounted() {
    this.getItems('ALL');
},
methods: {
  getItems(topic) {}
}

I also have the ptr-content added to my page-content like this:

<div class="page-content ptr-content">
  <div class="ptr-preloader">
    <div class="preloader"></div>
    <div class="ptr-arrow"></div>
  </div>

Is there a way I can catch the event that says that the user activated the refresh fully and then call getItems to refresh the content and set the state?

2

For example, like here https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/pull-to-refresh.html

3

Ah yes, the kitchen sink!

I was able to get it working by adding a new method called ‘refreshItems(e, done)’ which calls getItems and then calls done() to reset the refresh graphic (spinning wheel).

Humble suggestion to add the @ptr:refresh description to the refresh document page. Super helpful way to use refresh on a page.

4

It is in the docs https://framework7.io/docs/pull-to-refresh.html#dom-events

5

Absolutely, and thats a great set of documentation of the events. I read the docs through a second time yesterday and its not really clear that the @event=“method” pattern is there or recommended. I didn’t see it in most of the forum posts I found along the way for refresh.

Just a humble suggestion in the examples or as a note above the events for refresh and views, etc. to call out the common use of this pattern. I’m finding it incredibly valuable everywhere in my app!

1 Like
6

@powers Please note that the shorthand for event bindings is mentioned in the docs:

https://framework7.io/docs/router-component.html#dom-events-handling

Note that additional @ attribute in component template. It is a shorthand method to assign event listener to the specified element. Specified event handler will be searched in component methods .

Although I agree that a reminder to this functionality could be put below DOM event blocks for each component documentation.

7

I think someone new to F7 is going to have a hard time parsing that section. The example shows you what not to do programmatically. It could use and example of what TO do above it, showing the correct usage.

Small correction on text in doc - “Note the additional @ … method to assign an event listener …”

1 Like