Refresh page not works

Questions
1

Hi! :slight_smile:

I’m new to F7, I’m using the last version (v6) and testing it with Chrome.
I’ve a single page component, with a “pull to refresh” component. When I drag the page it doesn’t refresh. I added @ptr:refresh=${loadMore} and inside loadMore function I put $f7router.refreshPage();

I see animation, but xhr doesn’t fire! (I know that from network tab in chrome dev tools). Here’s my code:

	<template>
		<div class="page">
			...navbar...
		
			<div class="page-content content-area pt-80 ptr-content" @ptr:refresh=${loadMore}>
				
				<div class="ptr-preloader">
					<div class="preloader"></div>
					<div class="ptr-arrow"></div>
				</div>
			
				...
				
			</div>
		</div>
	</template>

	<script>
	export default (props, { $f7, $on, $update, $f7router }) => {
		const loadMore = (e, done) => {
			$f7router.refreshPage();
		}
	}
	</script>

Please, help!

2

This is a bad practice. On refresh you need to fetch items and then update the component. Look at default example https://framework7.io/docs/pull-to-refresh.html#examples

3

Thanks for your reply! :slight_smile:

Following your hints I solved this way:

	<div class="messages">
		${[...messaggi].map(([id, messaggio]) => $h`
			<div>${messaggio.testo}</div>
		`)}
	</div>

	...
	
	<script>
	export default (props, { $f7, $on, $update, $f7router }) => {
	
		messaggi = new Map(...);
		
		const loadMore = (e, done) => {
		
			app.request.json('<?=Url::current(["ultimoMessaggio" => end($messaggi)["id"]]);?>')
			.then(function (res) {
				if(res.data.length)
				{
					messaggi = new Map([...messaggi, ...Object.entries(res.data)])
					$update();
				}
				done();
			});	
		}
		
		...
		
	}
	</script>

Thanks very much! :smiley: