I used routable tab and there are 2 tab page both have ptr-content. I found that the PTR event will be accumulated. For instant, when I performed page1 pull to refresh, ptr:refresh has fired and it showed text to console twice. I switched to page2 to refresh, it showed text to console twice. Then I switched back page1 to refresh, it showed text to console four times. I am newbie and what’s wrong?
Best regards,
Garcia
main.html
<template>
<div class="page no-navbar color-theme-teal main" data-name="main">
<!-- toolbar -->
<div class="views toolbar tabbar tabbar-labels toolbar-bottom" id="main-toolbar">
<div class="toolbar-inner">
<!-- Browse -->
<a href="./main-browse/" class="tab-link justify-content-center" data-route-tab-id="main-browse">
<i class="icon f7-icons">square_list</i>
</a>
<!-- Search -->
<a href="./main-predict/" class="tab-link justify-content-center" data-route-tab-id="main-predict">
<i class="icon f7-icons">graph_square</i>
</a>
</div>
</div>
<div class="tabs tabs-routable">
<!-- main page -->
<div id="main-browse" class="view page-content ptr-content tab hide-toolbar-on-scroll"></div>
<!-- search page -->
<div id="main-predict" class="view page-content ptr-content tab hide-toolbar-on-scroll"></div>
</div>
</div>
</template>
<style>
</style>
<script>
return {
data: function() {
},
on: {
pageBeforeRemove: function() {
},
//**************************************************************************
// main routine
//**************************************************************************
pageInit: function(page) {
},
//**************************************************************************
// screen decoration
//**************************************************************************
pageBeforeIn: function (e, page) {
},
},
methods: {
},
}
</script>
main-browse.html
<template>
<div class="main-browse">
<!-- preloader -->
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
</div>
</template>
<style>
</style>
<script>
return {
data: function() {
},
on: {
tabInit: function() {
$$('#main-browse.ptr-content').on('ptr:refresh', function(e) {
console.log('browse refresh');
app.ptr.done('#main-browse.ptr-content');
});
},
},
methods: {
},
}
</script>
main-predict.html
<div class="main-predict">
<!-- preloader -->
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
</div>
</template>
<style>
</style>
<script>
return {
data: function() {
},
on: {
tabInit: function() {
$$('#main-predict.ptr-content').on('ptr:refresh', function(e) {
console.log('predict refresh');
app.ptr.done('#main-predict.ptr-content');
});
},
},
methods: {
},
}
</script>
routes.js
routes = [
{
path: '/',
url: './index.html',
},
{
path: '/main/',
componentUrl: './pages/main.html',
tabs: [
{
path: '/main-browse/',
id: 'main-browse',
componentUrl: './pages/main-browse.html',
},
{
path: '/main-predict/',
id: 'main-predict',
componentUrl: './pages/main-predict.html',
},
],
},
// Default route (404 page).
{
path: '(.*)',
url: './pages/404.html',
},
];
main-browse.html
<template>
<div class="main-browse">
<!-- preloader -->
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
</div>
</template>
<style>
</style>
<script>
return {
data: function() {
},
on: {
tabInit: function() {
$$('#main-browse.ptr-content').on('ptr:refresh', function(e) {
console.log('browse refresh');
app.ptr.done('#main-browse.ptr-content');
});
},
},
methods: {
},
}
</script>