Hi
I want to reload pages as I pull the page down. My html pages are some thing like bellow:
<template id="page1.html">
<ons-page name='page1'>
<ons-toolbar class="topbar">
--------------------
</ons-toolbar>
<div class="container">
<ons-pull-hook class="pull-hook">
Pull to refresh
</ons-pull-hook> -->
<!-- <script src="../js/pull.js"></script> -->
</ons-page>
</template>
<template id="page2.html">
<ons-page name='page2'>
<ons-toolbar class="topbar">
------------------------
</ons-toolbar>
<div class="container">
<ons-pull-hook class="pull-hook">
Pull to refresh
</ons-pull-hook> -->
<!-- <script src="../js/pull.js"></script> -->
</ons-page>
</template>
,,,,,
And the code in pull.js is as bellow
var pullHook = document.getElementsByClassName('pull-hook');
for (var i = 0; i < pullHook.length; i++) {
pullHook[i].addEventListener('changestate', function(event) {
var message = 'Message';
switch (event.state) {
case 'initial':
message = 'Pull to refresh';
break;
case 'preaction':
message = 'Release';
break;
case 'action':
message = 'Loading...';
var pg=document.querySelector('#navigator').topPage.name;
document.querySelector('#navigator').pushPage(pg);
break;
}
pullHook.innerHTML = message;
});
pullHook.onAction = function(done) {
*
*
* list item
setTimeout(done, 1000);
};
}
Though its working ( pages refresh ) but I don’t the the messages in code on various events (such as “'Pull to refresh”, “Loading…”).
Also I have to load pull.js on every page.
My question is am I doing it right?