Pourquoi Uni-app n'affiche-t-il que trois vues ?

uniapp ne permet d'afficher que trois vues

Avec le développement continu des applications mobiles, les développeurs front-end ont des exigences de plus en plus élevées en matière de solutions de développement multiplateformes. Uni-app, en tant que framework multiplateforme basé sur Vue.js, a été largement utilisé. Cependant, vous pouvez rencontrer des problèmes étranges lors du développement avec Uni-app. Par exemple, aujourd'hui, nous allons discuter d'une question : Pourquoi Uni-app ne permet-il d'afficher que trois vues ?

Description du problème

Au cours du processus de développement utilisant Uni-app, les développeurs peuvent constater qu'Uni-app ne permet d'afficher que trois vues, que ce soit dans la machine réelle ou dans le simulateur. Cela semble être une question très étrange, car une telle restriction est très gênante lors du développement quotidien.

La raison du problème

Tout d'abord, nous devons comprendre l'architecture d'Uni-app. Uni-app fournit des capacités de développement multiplateforme basées sur Vue.js et est compatible avec les mini-programmes WeChat, les mini-programmes Alipay, H5, App et d'autres plates-formes. Au stade Uni-app, chaque composant est encapsulé dans un format similaire aux composants Web. Chaque composant doit enregistrer un conteneur de vues, et ce conteneur de vues est un composant de base fourni par Uni-app lui-même. Ce composant de base s'appelle Uni-view.

La cause du problème vient de l'implémentation du composant Uni-view. Uni-view est un composant conteneur. Il ne dessine pas le contenu de la page par lui-même, mais est responsable de l'affichage des sous-composants. Étant donné que les composants Uni-view doivent être stables sur différentes plates-formes, en termes d'implémentation, Uni-view dessine uniquement un conteneur sans rien dessiner dans le conteneur. Par conséquent, lors de la visualisation de la page Uni-app dans le simulateur ou l'appareil réel, seuls les trois premiers composants inclus dans le conteneur seront dessinés.

Solution

Alors, comment devrions-nous résoudre ce problème ?

Option 1 : Utilisez un composant similaire à ScrollView

Si vous devez afficher de nombreuses vues, vous pouvez utiliser un composant similaire à ScrollView. Dans Uni-app, vous pouvez utiliser le composant scroll-view pour obtenir l'effet de défilement.

Option 2 : Rendu dans le même conteneur de vue

Lorsque le nombre de conteneurs de vue dépasse trois, nous pouvons envisager de rendre tous les composants dans le même conteneur de vue. De cette façon, il nous suffit de restituer un conteneur de vues dans le composant principal, puis d'ajouter tous les composants enfants à ce conteneur.

Option 3 : Attendez que les données soient chargées avant de les afficher

Dans de nombreux cas, nous pouvons attendre que les données soient chargées avant d'afficher l'interface utilisateur. De cette manière, seule l'interface utilisateur nécessaire est affichée lors du premier chargement de la page, et l'interface utilisateur complète est affichée une fois les données chargées.

Résumé

Pendant le processus de développement d'Uni-app, certains problèmes peuvent rendre les développeurs très angoissés. Par exemple, nous avons expliqué aujourd'hui pourquoi Uni-app autorise uniquement l'affichage de trois vues. Ce problème survient principalement à cause de la manière dont le composant Uni-view est implémenté. Il existe de nombreuses solutions à ce problème et les développeurs peuvent choisir la méthode la plus appropriée en fonction de la situation réelle. J'espère que cet article pourra apporter de l'aide aux développeurs Uni-app.

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!