How to combine "pull to refresh" and "infinite scroll"


  • Admin

    This is a working example. Just put quasar-pull-to-refresh as parent of quasar-infinite-scroll, not the other way around:

    <template>
      <div>
        <div class="layout-padding">
          <quasar-pull-to-refresh :handler="getNew">
            <quasar-infinite-scroll :handler="refresher">
              <p class="caption">
              <span class="label bg-secondary text-white shadow-1">
                0
              </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              </p>
              <p v-for="(item, index) in items" class="caption">
                <span class="label bg-secondary text-white shadow-1">
                  {{ index + 1 }}
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              </p>
    
              <div class="row justify-center" style="margin-bottom: 50px;">
                <spinner name="dots" slot="message" :size="40"></spinner>
              </div>
            </quasar-infinite-scroll>
          </quasar-pull-to-refresh>
        </div>
      </div>
    </template>
    


  • @rstoenescu thx,but there will be a new problem ,the infinite scroll doesn’t work


  • Admin

    @joe I tested it myself before submitting code to you. It does work.



  • @rstoenescu I can’t scroll down in the mobile browser when I combine them ,can you help me


  • Admin

    @joe Hi, please wait the end of the week for me to release v0.9. That will work with pull to refresh and infinite scroll combined.



  • @rstoenescu thx, excited



  • @rstoenescu
    I test the official demo pull to refresh in the ios10 safari, scrolling up is not easy, the bug is also exsited , please check this
    when I combine them , I find scrolling up not easy in ios safari . it’s ok in android


  • Admin

    @joe yes, I noticed that too. Gonna squash some safari ios (the new IE of browsers) bugs really soon.



  • This post is deleted!


  • @rstoenescu
    Hey thank you for showing the neccessary nesting of both functionalities.
    Sadly I was not able to combine infinite scroll and push to refresh from the current github examples 😞

    I achieved something though:

    • infinite scroll is working
    • pull to refresh is working once (but done() call is not respected and therefore the spinning icon never disappears)
    
    <template>
    <div>
      <div class="q-pa-md">
    <q-pull-to-refresh @refresh="refresh">
        <q-infinite-scroll @load="onLoad" :offset="250">
    
    
          <div v-for="(itemPull, indexPull) in itemsPull" :key="indexPull" class="q-mb-sm">
            <q-badge color="secondary">
             Pull {{ itemsPull.length + indexPull }}
            </q-badge>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          </div>
    
    
    
        <div v-for="(itemInfi, indexInfini) in itemsInfini" :key="indexInfini" class="caption">
            <q-badge color="secondary">
            Infini{{ itemsPull.length - indexInfini }}
            </q-badge>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div>
    
    
    
        <template v-slot:loading>
          <div class="row justify-center q-my-md">
            <q-spinner-dots color="primary" size="40px" />
          </div>
        </template>
        </q-infinite-scroll>
     </q-pull-to-refresh>
    
    
    
    
      </div>
    
    </div>
    
    </template>
    
    <script>
    export default {
      data () {
        return {
          itemsPull: [],
          itemsInfini : [{}, {}, {}, {}, {}, {}, {}, {}, {}]
        }
      },
      methods: {
        refresh (index, done) {
          setTimeout(() => {
            this.itemsPull.push({}, {}, {}, {}, {}, {}, {})
            done()
          }, 1000)
        },
        onLoad (index, done) {
          setTimeout(() => {
            if (this.itemsInfini) {
              this.itemsInfini.push({}, {}, {}, {}, {}, {}, {})
              done()
            }
          }, 2000)
        }
      }
    }
    </script>
    
    

    ERROR:
    Test.vue?c961:56 Uncaught TypeError: done is not a function
    at eval

    Somehow done() is not known when both features are combined. Any idea how to fix this?


Log in to reply