F7+Vue Pull to Refresh Problem


#1

Hi
Firstly, sorry for my bad english.
I try to create a app which have 4 tabs with f7-toolbar and f7-tabs.
when f7-tab have f7-list which to pull to refresh , the page loaded well, but scroll up this page. the page change blank. how about to solve ? thanks

image

image


#2

做个jsfiddle吧,不知道你做的啥 :joy:


#3

f7-page in f7-page is not supported, so each your tab needs to have “ptr-class” with ptr-preloader as first child:

<f7-tab ... class="page-content ptr-content" @ptr:refresh.native="...">
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>
   ...
</f7-tab>

#4

thanks nolimits4web, do you have vue +f7 example about this question?


#5

Hi, here’s a working example:

<template>
  <f7-page :page-content="false" @page:init="onPageInit">
    <f7-navbar>
      <f7-nav-left back-link></f7-nav-left>
      <f7-nav-title>Lists</f7-nav-title>
    </f7-navbar>

    <f7-toolbar tabbar :bottom-md="false">
      <f7-link
        v-for="(tab, index) in stateList"
        :key="tab.id"
        :tab-link="`#tab-${tab.id}`"
        :tab-link-active="index === 0"
        >{{tab.name}}</f7-link>
    </f7-toolbar>

    <f7-tabs>
      <f7-tab
        v-for="(tab, index) in stateList"
        :key="tab.id"
        :id="`tab-${tab.id}`"
        class="page-content ptr-content"
        :tab-active="index === 0" @ptr:refresh.native="onPullToRefresh">
        <div class="ptr-preloader">
          <div class="preloader"></div>
          <div class="ptr-arrow"></div>
        </div>
        <div class="list media-list accordion-list">
          <ul>
...
          </ul>
        </div>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>
<script>
export default {

  data() {
    return {
      stateList: [{id: 'open', name: 'Open'}, {id: 'closed', name: 'Closed'}, {id: 'all', name: 'All'}],
    }
  },

  methods: {
    onPageInit() {
      const self = this;
       self.loadLists();
    },

    onPullToRefresh(e) {
      const self = this;

      self.loadLists().finally(() => {
        e.detail();
      });
    },

    loadLists() {
      return <a promise which retreives data and updates bindings>
    }
  }

}

</script>

#6

ok, thanks kozmanbalint, @ptr:refresh.native=“onPullToRefresh” only write on the tab . I think the tab content write another template.


#7

hi kozmanbalint, @ptr:refresh.native=“onPullToRefresh” only write on the tab . I think the tab content write another template. how about solve ? thanks


#8

Sorry, I don’t really understand the question.


#9

I have tried above example, but I don’t know it’s still not working… :frowning: