Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. Zeni241
    Z
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    Zeni241

    @Zeni241

    0
    Reputation
    1
    Posts
    271
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    Zeni241 Follow

    Posts made by Zeni241

    • pull Hook on multiple pages

      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?

      posted in Onsen UI
      Z
      Zeni241