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

[joe]

I want to combine the two ,
but there will be some space between them,
I need to remove it

who can help me?

thank you very munch ,joe

[rstoenescu]

Got any repo I can take a look? Thx.

[joe]

@rstoenescu

<template>
  <div>
    <div class="layout-padding">
      <quasar-infinite-scroll :handler="refresher">
        <quasar-pull-to-refresh :handler="getNew">
          <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>
        </quasar-pull-to-refresh>
        <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>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [{}, {}, {}, {}, {}]
    }
  },
  methods: {
    refresher (index, done) {
      console.log('index', index)
      setTimeout(() => {
        let items = []

        for (let i = 0; i < 7; i++) {
          items.push({})
        }

        this.items = this.items.concat(items)
        done()
      }, 1000)
    },
    getNew (done) {
      done()
    }
  }
}
</script>

[rstoenescu]

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>

[joe]

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

[rstoenescu]

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

[joe]

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

[rstoenescu]

@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.

[joe]

@rstoenescu thx, excited

[joe]

@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

[rstoenescu]

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

[pureblood]

This post is deleted!

[pureblood]

@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?