リスト ページと詳細ページを実装するための UniApp 設計および開発ガイド

UniApp は、Vue.js に基づくクロスプラットフォーム開発フレームワークで、モバイル アプリケーション、小さなプログラム、H5 ページを迅速に構築できます。 UniApp では、リスト ページと詳細ページの設計と開発を実装することが非常に一般的な要件です。この記事では、UniApp でリスト ページと詳細ページを設計および開発する方法を紹介し、コード例を使用して説明します。

1. リストページのデザイン
リストページをデザインするときは、まずリストに表示するデータと表示方法を決める必要があります。以下は、製品リストを示す簡単な例です。

<template>
  <view>
    <navigator v-for="product in productList" :url="'/pages/detail?id=' + product.id">
      <image :src="product.imgUrl" class="product-img" mode="aspectFit"></image>
      <text>{{ product.name }}</text>
      <view class="product-info">
        <text>价格：{{ product.price }}</text>
        <text>库存：{{ product.stock }}</text>
      </view>
    </navigator>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        productList: [
          {
            id: 1,
            imgUrl: 'http://example.com/product1.jpg',
            name: '商品1',
            price: 100,
            stock: 10
          },
          {
            id: 2,
            imgUrl: 'http://example.com/product2.jpg',
            name: '商品2',
            price: 200,
            stock: 20
          }
        ]
      }
    }
  }
</script>

<style scoped>
  .product-img {
    width: 200rpx;
    height: 200rpx;
  }

  .product-info {
    display: flex;
    justify-content: space-between;
  }
</style>

上記のコードでは、<navigator> コンポーネントを使用して、各製品をクリックすると詳細ページにジャンプすることを実現しています。 <image> コンポーネントと <text> コンポーネントを使用して、製品の写真、名前、価格、在庫、その他の情報を表示します。 v-for 命令を使用して productList 配列を走査し、複数の製品を表示します。

2. 詳細ページのデザイン
詳細ページには通常、単一の製品の詳細情報が表示されます。詳細ページをデザインするときに、製品の説明、仕様、レビューなど、実際のニーズに基づいてより多くの製品情報を表示できます。以下は、製品の詳細を示す簡単な例です。

<template>
  <view>
    <image :src="product.imgUrl" class="product-img" mode="aspectFit"></image>
    <text>{{ product.name }}</text>
    <view class="product-info">
      <text>价格：{{ product.price }}</text>
      <text>库存：{{ product.stock }}</text>
    </view>
    <text>{{ product.description }}</text>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        product: {
          id: 1,
          imgUrl: 'http://example.com/product1.jpg',
          name: '商品1',
          price: 100,
          stock: 10,
          description: '这是商品1的描述信息。'
        }
      }
    }
  }
</script>

<style scoped>
  .product-img {
    width: 300rpx;
    height: 300rpx;
  }

  .product-info {
    display: flex;
    justify-content: space-between;
  }
</style>

上記のコードでは、<image> コンポーネントと <text> コンポーネントを使用します。製品の写真、名前、価格、在庫、説明など。

3. リストページと詳細ページの開発
UniApp でリストページと詳細ページを開発する場合、Vue.js のコンポーネント開発方法を使用できます。リスト ページと詳細ページはそれぞれコンポーネントにカプセル化され、必要に応じて参照できます。以下は、リスト ページと詳細ページのコンポーネントを開発する方法を示す例です。

<!-- 列表页组件 -->
<template>
  <view>
    <navigator v-for="product in productList" :url="'/pages/detail?id=' + product.id">
      <image :src="product.imgUrl" class="product-img" mode="aspectFit"></image>
      <text>{{ product.name }}</text>
      <view class="product-info">
        <text>价格：{{ product.price }}</text>
        <text>库存：{{ product.stock }}</text>
      </view>
    </navigator>
  </view>
</template>

<script>
  export default {
    props: {
      productList: {
        type: Array,
        default: () => []
      }
    }
  }
</script>

<style scoped>
  .product-img {
    width: 200rpx;
    height: 200rpx;
  }

  .product-info {
    display: flex;
    justify-content: space-between;
  }
</style>

<!-- 详情页组件 -->
<template>
  <view>
    <image :src="product.imgUrl" class="product-img" mode="aspectFit"></image>
    <text>{{ product.name }}</text>
    <view class="product-info">
      <text>价格：{{ product.price }}</text>
      <text>库存：{{ product.stock }}</text>
    </view>
    <text>{{ product.description }}</text>
  </view>
</template>

<script>
  export default {
    props: {
      product: {
        type: Object,
        default: () => ({})
      }
    }
  }
</script>

<style scoped>
  .product-img {
    width: 300rpx;
    height: 300rpx;
  }

  .product-info {
    display: flex;
    justify-content: space-between;
  }
</style>

上記のコードでは、リスト ページと詳細ページを List と Detail にカプセル化します。それぞれ コンポーネントを作成し、props を通じてデータを渡します。リスト ページ コンポーネントは productList という名前の配列を受け入れ、詳細ページ コンポーネントは product という名前のオブジェクトを受け入れます。

4. まとめ
上記の設計開発ガイドラインにより、UniApp でのリスト ページと詳細ページの設計と開発を簡単に実装できます。まず一覧に表示するデータと表示方法を決め、次に一覧ページと詳細ページのコンポーネントをそれぞれ設計し、propsにデータを渡します。最後に、実際のニーズに応じて、より多くの製品情報を表示したり、インタラクティブな効果をカスタマイズしたりできます。この記事が UniApp アプリケーション開発の皆様のお役に立てれば幸いです。

以上がリスト ページと詳細ページを実装するための UniApp 設計および開発ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。