


Comment réaliser un effet de chargement de défilement similaire aux enregistrements de chat WeChat dans Vue?
Apr 04, 2025 pm 04:12 PMVue.js simule l'effet de chargement de défilement de l'historique du chat WeChat
Cet article montre comment réaliser un effet de chargement de défilement similaire aux enregistrements de chat WeChat dans l'application Vue.js. Lorsque l'utilisateur défile vers le haut, plus d'historique de chat sont chargés et la barre de défilement est dans sa position actuelle plut?t que de revenir en haut.
Le code suivant fournit une solution d'implémentation complète:
<template> <div id="app"> <div class="container" ref="chatListRef"> <ul> <li v-for="item in msgs" :key="item">{{ article }}</li> </ul> </div> </div> </template> <script> import { ref, onMounted, nextTick } from 'vue'; export default { setup() { const msgs = ref([...generateNumbers(1, 200)]); // 初始數(shù)據(jù) const chatListRef = ref(null); const generateNumbers = (start, end) => { // 生成數(shù)字序列,此處可替換為實(shí)際數(shù)據(jù)加載邏輯 const numbers = []; for (let i = start; i <= end; i ) { numbers.push(i); } return numbers; }; const scrollToBottom = async () => { await nextTick(); // 確保DOM更新完畢 chatListRef.value.scrollTop = chatListRef.value.scrollHeight; }; const handleScroll = () => { const container = chatListRef.value; if (container.scrollTop === 0) { const prevScrollHeight = container.scrollHeight; const newMsgs = generateNumbers(msgs.value.length 1, msgs.value.length 100); // 加載更多數(shù)據(jù) msgs.value = [...newMsgs, ...msgs.value]; // 將新數(shù)據(jù)添加到數(shù)組頭部 nextTick(() => { container.scrollTop = container.scrollHeight - prevScrollHeight; }); } }; onMounted(() => { scrollToBottom(); }); return { msgs, chatListRef, handleScroll }; }, }; </script> <style scoped> * { margin: 0; padding: 0; } html, body { height: 100vh; background-color: #e9f5f8; } .container { width: 200px; height: 500px; overflow-y: auto; background-color: #fff; } </style>
La clé du code réside dans la fonction handleScroll
: il écoute les événements de défilement, et lorsque la barre de défilement atteint le haut ( container.scrollTop === 0
), il charge de nouvelles données et utilise nextTick
pour garantir qu'après le DOM à jour, la position de la barre de défilement est recalculée, en gardant ainsi la barre de décrex dans sa position d'origine. La fonction generateNumbers
est un espace réservé qui doit être remplacé par votre logique réelle de chargement de données (par exemple, récupérer les données de l'API). scrollToBottom
fait défiler la barre de défilement vers le bas une fois le composant monté.
Cette version améliorée est plus concise et utilise la fonction de crochet de cycle de vie onMounted
pour initialiser la position de la barre de défilement, améliorant la lisibilité et la maintenabilité du code. N'oubliez pas de remplacer la fonction generateNumbers
pour votre méthode réelle d'acquisition de données.
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!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Dans le contexte des fluctuations violentes sur le marché des crypto-monnaies, la demande des investisseurs de préservation des actifs devient de plus en plus importante. Cet article vise à répondre à la manière de couvrir efficacement les risques dans le cercle de monnaie turbulent. Il introduira en détail le concept de stablecoin, un outil de couverture de base, et fournira une liste de stablescoins TOP3 en analysant les options très reconnues actuelles sur le marché. L'article expliquera comment sélectionner et utiliser ces stablescoins en fonction de leurs propres besoins, afin de mieux gérer les risques dans un environnement de marché incertain.

Cet article discutera des stablescoins mondiaux et analysera les stablescoins qui ont l'attribut d'aversion au risque du "substitut d'or" dans le cycle à la baisse du marché (marché baissier). Nous expliquerons comment juger et choisir un outil de stockage de valeur relativement stable dans un marché baissier en comparant la valeur marchande, le mécanisme d'approbation, la transparence et la combinaison de vues communes sur Internet, et expliquer ce processus d'analyse.

Au fur et à mesure que les conditions du marché accélèrent, de plus en plus d'investisseurs intelligents ont commencé à augmenter tranquillement leurs positions dans le cercle des devises. Beaucoup de gens se demandent ce qui les fait prendre de manière décisive lorsque la plupart des gens attendent et voient? Cet article analysera les tendances actuelles à travers des données sur la cha?ne pour aider les lecteurs à comprendre la logique des fonds intelligents, afin de mieux saisir la prochaine série de possibilités de croissance potentielle de la richesse.

Cet article introduira plusieurs stablescoins grand public et expliquera en profondeur comment évaluer la sécurité d'un stablecoin à partir de plusieurs dimensions telles que la transparence et la conformité, afin de vous aider à comprendre quelles étalines sont généralement considérées comme des choix relativement fiables sur le marché, et à apprendre à juger vous-même leurs attributs "de danger".

En tant qu'actif numérique stable fixé au dollar américain, la conversion et la monétisation de la valeur de l'USDT sont des problèmes qui concernent de nombreux utilisateurs. Cet article présentera en détail la composition de la valeur de l'USDT et fournira des tutoriels pratiques sur la conversion et la monétisation de la valeur en Chine continentale. La valeur de trésorerie de 1 USDT est approximativement égale au taux de change du dollar en temps réel, mais le prix de livraison final via C2C Trading variera légèrement. Le c?ur de la conversion est de sélectionner un marchand avec une bonne réputation et un prix approprié pour échanger via la fonction C2C d'une plate-forme fiable.

Récemment, Bitcoin a frappé un nouveau sommet, Dogecoin a inauguré un fort rebond et le marché était chaud. Ensuite, nous analyserons les moteurs du marché et les aspects techniques pour déterminer si Ethereum a toujours des opportunités de suivre la montée.

Le modèle dans le champ de la cha?ne publique montre une tendance de "un super, beaucoup de forts et une centaine de fleurs fleurissant". Ethereum mène toujours avec ses douves écologiques, tandis que Solana, Avalanche et d'autres sont difficiles à affronter les performances. Pendant ce temps, Polkadot, Cosmos, qui se concentre sur l'interopérabilité, et ChainLink, qui est une infrastructure critique, forment une image future de plusieurs cha?nes coexistant. Pour les utilisateurs et les développeurs, le choix de la plate-forme n'est plus un seul choix, mais nécessite un compromis entre les performances, le co?t, la sécurité et la maturité écologique basée sur des besoins spécifiques.

Oui, mais il y a des restrictions. ① Vous pouvez vous connecter au même compte sur les téléphones iPhone et Android, mais vous connecter au dernier appareil entra?nera la première session de la session; ② Vous pouvez vous connecter en même temps sur le téléphone mobile et le bureau de l'ordinateur, mais les fonctions ne sont pas synchronisées; ③ Bien que l'utilisation d'outils tiers ou de fonctions à double application puisse permettre la journalisation entre deux téléphones mobiles, il est officiellement pris en charge et peut violer les réglementations; ④ Les solutions alternatives incluent l'utilisation de la version Web / version de bureau pour correspondre au téléphone principal, ou transférer des enregistrements de chat via des outils de sauvegarde et de fichier cloud. Certaines machines Android peuvent également utiliser "Dual Applications" pour exécuter deux instances de compte.
