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