I’m trying to get the reverse property to work on QInfiniteScroll but it doesn’t scroll my messages to the bottom. Any help would be great! Here’s some example code:
<template>
<q-page padding class="column">
<q-infinite-scroll
class="col column q-gutter-y-sm"
:style="inputOffset"
@load="onLoad"
:offset="250"
reverse
>
<q-chat-message
v-for="message in messages"
:key="message.text"
:text="[message.text]"
/>
</q-infinite-scroll>
<p
class="text-grey"
v-if="!loading && hasLoaded && messages.length === 0"
>
No messages yet. Be the one to get it going!
</p>
<q-page-sticky expand position="bottom" class="q-pa-sm">
<q-form
class="full-width row q-gutter-x-sm"
style="background: rgba(255,255,255,0.7)"
ref="messageEntryComp"
@submit="saveMessage"
>
<q-input
class="col bg-white"
outlined
v-model="formData.message"
autogrow
dense
placeholder="Type your message here"
/>
<q-btn
size="lg"
class="col-auto"
type="submit"
icon="send"
color="primary"
/>
</q-form>
<q-resize-observer @resize="onResizeInputComp" />
</q-page-sticky>
</q-page>
</template>
<script>
import Vue from 'vue';
export default {
props: {
id: {
type: String,
required: true,
},
},
data() {
return {
loading: false,
hasLoaded: false,
messages: [
{ text: '1' },
{ text: '2' },
{ text: '3' },
{ text: '4' },
{ text: '5' },
{ text: '6' },
{ text: '7' },
{ text: '8' },
{ text: '9' },
{ text: '10' },
{ text: '11' },
{ text: '12' },
{ text: '13' },
],
formData: {
message: '',
},
inputOffset: {
'margin-bottom': 0,
},
};
},
methods: {
async onLoad(index, done) {
if (this.messages.length % 50 === 0) {
const moreMessages = await this.loadMore(index - 1);
this.messages = this.messages.concat(moreMessages);
this.hasLoaded = true;
done(moreMessages.length !== 50);
} else {
done(true);
}
},
async loadMore(offset) {
const res = await this.$axios.get(
`/events/${this.id}/messages?offset=${offset || 0}`
);
return res.data;
},
onResizeInputComp(size) {
Vue.set(this.inputOffset, 'margin-bottom', size.height + 10 + 'px');
},
},
};
</script>