Comment accéder à la page de détails dans la liste Uniapp

Avec le développement des APP mobiles, nous avons de plus en plus besoin d'afficher et de gérer des listes de données dans l'application. L'un des besoins courants est d'accéder à la page de détails après avoir cliqué sur l'élément de la liste. Il est très simple d'implémenter cette fonction dans UniApp. Cet article vous présentera les étapes spécifiques d'implémentation.

1. Créer la page de détails

Avant de créer la page de détails, nous devons nous assurer que la page de liste a été créée et que les données peuvent être affichées normalement. Si vous n'avez pas encore créé de page de liste, vous pouvez vous référer à l'exemple de code dans la documentation officielle d'UniApp.

Avant de créer la page de détails, nous devons créer un dossier "pages" dans le répertoire racine du projet pour stocker nos pages. Ensuite, créez un nouveau dossier "detail" et créez-y un nouveau fichier "detail.vue". Ce fichier est notre page de détails, comme indiqué ci-dessous :

<template>
  <div class="uni-page">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  onLoad(option) {
    this.title = option.title
    this.content = option.content
  }
}
</script>

Il s'agit d'une page simple avec un titre et une section de contenu. Nous obtiendrons les données dans la page de liste et les transmettrons à la page de détails pour les afficher.

2. Passer de la page de liste à la page de détails

Dans la page de liste, nous devons ajouter un événement de clic pour chaque élément de la liste Lorsque l'on clique sur l'élément de la liste, les données de l'élément peuvent être transmises aux détails. page et passez à la page de détails pour l'afficher. Les étapes spécifiques de mise en œuvre sont les suivantes :

1. Ajoutez un événement de clic à l'élément de liste

Recherchez le fichier de la page de liste (généralement "index.vue") sous le dossier "pages" et ajoutez un événement de clic pour pour chaque élément de liste dans le gestionnaire de modèle, le code est le suivant :

<template>
  <ul>
    <li @click="toDetail(item)" v-for="(item,index) in list" :key="index">{{item.title}}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    // 获取列表数据
    this.getList()
  },
  methods: {
    getList() {
      // 省略获取列表数据的代码
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/detail/detail?title=' + item.title + '&content=' + item.content
      })
    }
  }
}
</script>

Dans ce code, nous ajoutons un gestionnaire d'événement "@click" pour chaque élément li, appelons l'API "uni.navigateTo" dans l'événement click, passons à la page de détails et les données des éléments de la liste sont transmises à la page de détails via les paramètres d'URL.

Dans la méthode "toDetail", nous avons appelé l'API "uni.navigateTo", qui peut accéder à une nouvelle page et ajouter un bouton "retour" à la barre de navigation de la page actuelle. Lorsque l'utilisateur clique sur le bouton Précédent, il peut revenir à la page précédente.

2. Recevoir et afficher des données

Dans l'événement "onLoad" de la page de détails, nous pouvons obtenir les données transmises depuis la page de liste via le paramètre "option" et les afficher sur la page. Le code est le suivant :

<template>
  <div class="uni-page">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  onLoad(option) {
    this.title = option.title
    this.content = option.content
  }
}
</script>

3. Résumé

Jusqu'à présent, nous avons terminé tout le processus de passage de la page de liste à la page de détails. Grâce à une implémentation de code simple, nous pouvons aider les utilisateurs à gérer et à afficher les données plus facilement. Si vous avez d'autres questions sur UniApp, vous pouvez vous référer à la documentation officielle d'UniApp, ou vous pouvez laisser des messages pour communiquer et progresser ensemble.

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!