Comment fermer les pages du milieu dans le développement Uniapp

Pendant le processus de développement d'Uniapp, nous devons souvent fermer la page. Mais comment fermer uniquement les pages du milieu lors de la fermeture de la page ? Cet article expliquera comment implémenter cette fonction dans le développement d'Uniapp.

Première étape : comprendre la pile de pages

Dans uniapp, nous pouvons utiliser uni.navigateTo et uni.redirectTo pour accéder à la page, et nous pouvons également utiliser uni.navigateBack pour revenir à la page précédente. Dans le processus de saut et de retour aux pages, la pile de pages joue un rôle important.

La pile de pages est un tableau qui stocke toutes les pages de la pile de pages actuelle. Grâce à la pile de pages, nous pouvons passer d'une page à l'autre, transmettre des paramètres et fermer la page.

Par défaut, la pile de pages commence à partir de la page d'accueil (c'est-à-dire app.vue) et la page supérieure est placée à la fin de la pile de pages.

Par exemple, nous passons à la page A via uni.navigateTo, puis passons à la page B via uni.navigateTo dans la page A. À l'heure actuelle, la structure de la pile de pages est la suivante :

[ home, A, B ]

Parmi elles, home est la page d'accueil et la page supérieure est B. Dans la page B, si nous voulons revenir à la page A, nous pouvons le faire via la fonction uni.navigateBack().

Si on veut fermer la page B tout en revenant à la page A, comment y parvenir ? Cela nous oblige à exploiter la pile de pages.

Étape 2 : Manipuler la pile de pages

Nous pouvons fermer toutes les pages via uni.reLaunch et rouvrir la page cible dans une page ouverte. Mais ce n’est pas ce dont nous avons besoin puisque nous voulons seulement fermer la page du milieu.

Dans uniapp, vous pouvez obtenir la pile de pages actuelle via la méthode uni.getCurrentPages(). Cette méthode renvoie un tableau qui stocke toutes les pages de la pile de pages actuelle. Nous pouvons opérer sur la pile de pages via ce tableau.

Tout d'abord, nous pouvons obtenir l'état de la pile de pages actuelle via getCurrentPages() :

let pages = getCurrentPages()

À ce moment, le tableau pages enregistre toutes les pages de la pile de pages. Si nous voulons fermer la page actuelle et la page précédente dans la pile de pages, nous pouvons le faire comme ceci :

let pages = getCurrentPages()
let currentPage = pages[pages.length - 1]
let prePage = pages[pages.length - 2]
currentPage.$destroy()
uni.navigateBack({
  delta: 1,
  success: function () {
    prePage.setData({
      foo: 'bar'
    })
  }
})

Dans ce code, nous obtenons d'abord l'état de la pile de pages actuelle. Ensuite, les instances de la page actuelle et de la page précédente sont obtenues respectivement via currentPage et prePage. Ensuite, l'objet instance de la page actuelle peut être détruit via la méthode $destroy().

Enfin, utilisez la méthode uni.navigateBack() pour revenir à la page précédente et modifier les données de la page précédente.

Si vous souhaitez fermer plusieurs pages, vous pouvez fermer les pages une par une en les parcourant en boucle. Par exemple, si vous souhaitez fermer la page actuelle, la page précédente et la page précédente, vous pouvez le faire comme ceci :

let pages = getCurrentPages()
for (let i = 0; i < 3; i++) {
  let currentPage = pages[pages.length - 1 - i]
  currentPage.$destroy()
}
uni.navigateBack({
  delta: 2,
  success: function () {
    // do something
  }
})

De cette façon, vous pouvez réaliser la fonction de fermer uniquement les pages du milieu.

Résumé

Dans le développement Uniapp, la pile de pages est un concept très important. En comprenant la pile de pages, nous pouvons réaliser des fonctions telles que sauter entre les pages, passer des paramètres et fermer des pages.

Pour fermer les pages du milieu, vous pouvez utiliser la méthode getCurrentPages() pour obtenir l'état de la pile de pages actuelle, fermer les pages une par une via un parcours en boucle, et enfin utiliser la méthode uni.navigateBack() pour revenir à la page précédente.

J'espère que cet article pourra vous être utile !

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!