Bagaimana untuk melompat ke halaman butiran dalam senarai uniapp

Dengan pembangunan APP mudah alih, kami semakin perlu memaparkan dan mengurus senarai data dalam aplikasi. Salah satu keperluan biasa ialah melompat ke halaman butiran selepas mengklik pada item senarai. Sangat mudah untuk melaksanakan fungsi ini dalam UniApp Artikel ini akan memperkenalkan anda kepada langkah pelaksanaan khusus.

1. Cipta halaman butiran

Sebelum membuat halaman butiran, kita perlu memastikan bahawa halaman senarai telah dibuat dan data boleh dipaparkan seperti biasa. Jika anda belum membuat halaman senarai lagi, anda boleh merujuk kepada kod sampel dalam dokumentasi rasmi UniApp.

Sebelum mencipta halaman butiran, kami perlu mencipta folder "halaman" dalam direktori akar projek untuk menyimpan halaman kami. Seterusnya, buat folder "detail" baharu dan buat fail "detail.vue" baharu di dalamnya. Fail ini adalah halaman butiran kami, seperti yang ditunjukkan di bawah:

<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>

Ini adalah halaman yang ringkas, mengandungi tajuk dan bahagian kandungan Kami akan mendapatkan data dalam halaman senarai dan menghantarnya ke halaman butiran untuk diproses tunjuk.

2. Lompat dari halaman senarai ke halaman butiran

Dalam halaman senarai, kita perlu menambah acara klik untuk setiap item senarai apabila item senarai diklik, data item boleh Hantar ke halaman butiran dan lompat ke halaman butiran untuk paparan. Langkah pelaksanaan khusus adalah seperti berikut:

1 Tambahkan acara klik pada item senarai

Cari fail halaman senarai (biasanya "index.vue") dalam "halaman". folder, dalam templat Tambah pengendali acara klik untuk setiap item senarai, kodnya adalah seperti berikut:

<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>

Dalam kod ini, kami menambah pengendali acara "@klik" untuk setiap elemen li, dan memanggil "uni . navigateTo" API, lompat ke halaman butiran dan hantar data item senarai ke halaman butiran melalui parameter url.

Dalam kaedah "toDetail", kami memanggil API "uni.navigateTo", yang boleh melompat ke halaman baharu dan menambah butang "kembali" pada bar navigasi halaman semasa. Apabila pengguna mengklik butang kembali, mereka boleh kembali ke halaman sebelumnya.

2. Terima dan paparkan data

Dalam acara "onLoad" halaman butiran, kita boleh mendapatkan data yang dihantar dari halaman senarai melalui parameter "pilihan" dan memaparkannya pada halaman tersebut. Kodnya adalah seperti berikut:

<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. Ringkasan

Setakat ini, kami telah menyelesaikan keseluruhan proses melompat dari halaman senarai ke halaman butiran. Melalui pelaksanaan kod yang mudah, kami boleh membantu pengguna mengurus dan memaparkan data dengan lebih mudah. Jika anda mempunyai soalan lain tentang UniApp, anda boleh merujuk kepada dokumentasi rasmi UniApp, atau anda boleh meninggalkan mesej untuk berkomunikasi dan membuat kemajuan bersama-sama.

Atas ialah kandungan terperinci Bagaimana untuk melompat ke halaman butiran dalam senarai uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!