QInfiniteScroll reverse not working



  • 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>
    

Log in to reply