Maison > interface Web > uni-app > Comment implémenter le chargement progressif dans Uniapp

Comment implémenter le chargement progressif dans Uniapp

藏色散人
Libérer: 2023-01-13 00:44:30
original
7540 Les gens l'ont consulté

Méthodes permettant à Uniapp d'implémenter le chargement par défilement : 1. Utilisez la méthode "onReachBottom(){console.log("...")}" 2. Utilisez "..."

Comment implémenter le chargement progressif dans Uniapp

<.>

L'environnement d'exploitation de ce tutoriel : système Windows 7, uni-app version 2.5.1, ordinateur Dell G3

Recommandé (gratuit) :

Tutoriel uni-app

<.>uniapp implémente le défilement vers le bas pour charger plus de données

Si la quantité de données est très importante, le chargement par lots des données est une méthode d'optimisation. il ? onReachBottom

Cycle de vie d'uniapp

L'événement lorsque la page défile vers le bas (et non vers le bas), souvent utilisé pour remonter et charger le suivant page de données, comme l'utilisation de la vue par défilement. S'il n'y a pas de défilement au niveau de la page, l'événement du bas ne sera pas déclenché

onReachBottom Exemple : onReachBottom

onReachBottom(){
	console.log("我已经滚动到底部了")}
Copier après la connexion

. Cet événement sera déclenché lorsque la page défile vers le bas


Cette méthode convient à une seule page. S'il y a plusieurs défilements sur la même page, alors. vous devez utiliser

Comment implémenter le chargement progressif dans Uniapp

vue par défilement

scroll-view

Zone d'affichage défilante pour le défilement de la zone

exemple de vue par défilement :

<scroll-view scroll-y="true" @scrolltolower="lower()" :  style="max-width:90%">
	// 内容
	</scroll-view>
Copier après la connexion
methods:{
		lower(e)
		{
			console.log("已经滚动到底部了")
		}	
	},
computed:{
		scrollH:function(){
			let sys = uni.getSystemInfoSync();
			let winWidth = sys.windowWidth;
			let winrate = 750/winWidth;
			let winHeight =parseInt(sys.windowHeight*winrate)
			return winHeight	
		}
	}
Copier après la connexion

Obligatoire lors de l'utilisation du défilement vertical. Donnez une hauteur fixe et définissez-la via CSS

Pour plus de détails, voir : problème d'adaptation de la hauteur de la vue de défilement dans uniapp

heightQuand la page défile vers le bas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal