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
做个jsfiddle吧,不知道你做的啥
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>
thanks nolimits4web, do you have vue +f7 example about this question?
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>
2 Likes
ok, thanks kozmanbalint, @ptr:refresh.native=“onPullToRefresh” only write on the tab . I think the tab content write another template.
hi kozmanbalint, @ptr:refresh.native=“onPullToRefresh” only write on the tab . I think the tab content write another template. how about solve ? thanks
Sorry, I don’t really understand the question.
I have tried above example, but I don’t know it’s still not working…