ユニアプリ一覧の詳細ページへのジャンプ方法

モバイルAPPの開発に伴い、アプリケーション内でデータリストを表示および管理する必要性がますます高まっています。よくあるニーズの 1 つは、リスト項目をクリックした後に詳細ページにジャンプすることです。この機能をUniAppに実装するのは非常に簡単ですが、この記事では具体的な実装手順を紹介します。

1. 詳細ページの作成

詳細ページを作成する前に、一覧ページが作成され、データが正常に表示されることを確認する必要があります。まだリスト ページを作成していない場合は、UniApp 公式ドキュメントのサンプル コードを参照してください。

詳細ページを作成する前に、ページを保存するためにプロジェクトのルート ディレクトリに「pages」フォルダーを作成する必要があります。次に、新しい「detail」フォルダーを作成し、その中に新しい「detail.vue」ファイルを作成します。このファイルは、以下に示すように、詳細ページです:

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

これは、タイトルとコンテンツ部分を含む単純なページです。リスト ページのデータを取得し、処理のために詳細ページに渡します。見せる。

2. リストページから詳細ページへジャンプします

リストページでは、リスト項目ごとにクリックイベントを追加する必要があります。リスト項目がクリックされると、リスト項目のデータが追加されます。アイテムを詳細ページに渡すと、詳細ページにジャンプして表示できます。具体的な実装手順は次のとおりです:

1. リスト項目にクリック イベントを追加します

「pages」でリスト ページのファイル (通常は「index.vue」) を見つけます。テンプレート内の各リスト項目にクリック イベント ハンドラーを追加します。コードは次のとおりです。

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

このコードでは、各 li 要素に "@click" イベント ハンドラーを追加し、"uni" を呼び出します。 .navigateTo」API を使用して詳細ページに移動し、url パラメーターを介してリスト項目データを詳細ページに渡します。

「toDetail」メソッドでは、「uni.navigateTo」API を呼び出しました。これにより、新しいページにジャンプし、現在のページのナビゲーション バーに「戻る」ボタンを追加できます。ユーザーが戻るボタンをクリックすると、前のページに戻ることができます。

2. データの受信と表示

詳細ページの「onLoad」イベントでは、一覧ページから「option」パラメータを介して渡されたデータを取得し、表示することができます。ページ。コードは次のとおりです:

<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. 概要

これまでに、リスト ページから詳細ページにジャンプするプロセス全体が完了しました。シンプルなコード実装により、ユーザーがより便利にデータを管理および表示できるようになります。 UniApp について他に質問がある場合は、UniApp 公式ドキュメントを参照するか、メッセージを残してコミュニケーションをとり、一緒に進歩することができます。

以上がユニアプリ一覧の詳細ページへのジャンプ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。