uniappで商品分類ナビゲーションを実装する方法-uni-app-php.cn

uniappで商品分類ナビゲーションを実装する方法

WBOY

リリース： 2023-07-04 15:21:10

オリジナル

2403 人が閲覧しました

uniapp で製品分類ナビゲーションを実装する方法

はじめに: モバイルインターネットの急速な発展に伴い、e コマースプラットフォームは人々が買い物をするための主要なチャネルの 1 つになりました。ユーザーエクスペリエンスを向上させ、ユーザーが必要な製品を素早く見つけやすくするために、製品カテゴリのナビゲーションの重要性がますます高まっています。この記事では、uniapp で製品カテゴリナビゲーションを実装する方法と、対応するコード例を紹介します。

1. 準備作業
開始する前に、次の作業を準備する必要があります:

Uniapp プロジェクトは、HBuilderX などのツールを使用して作成できます。
カテゴリ名と対応する製品リストを含む製品分類データ。

2. カテゴリページの作成

uniapp プロジェクトにページを作成し、「category」という名前を付けます。
「カテゴリ」ページの vue ファイルに、次のコードを記述します。

<template>
  <view class="container">
    <view class="category-list">
      <scroll-view class="category-scrollview" scroll-x>
        <view class="category-item" v-for="(item, index) in categoryList" :key="index" @click="selectCategory(item)">
          {{ item.name }}
        </view>
      </scroll-view>
    </view>
    <view class="goods-list">
      <view class="goods-item" v-for="(item, index) in selectedCategory.goodsList" :key="index">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        categoryList: [
          { name: "分类1", goodsList: [{ name: "商品1" }, { name: "商品2" }, { name: "商品3" }] },
          { name: "分类2", goodsList: [{ name: "商品4" }, { name: "商品5" }, { name: "商品6" }] },
          { name: "分类3", goodsList: [{ name: "商品7" }, { name: "商品8" }, { name: "商品9" }] }
        ],
        selectedCategory: {}
      }
    },
    methods: {
      selectCategory(category) {
        this.selectedCategory = category;
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20rpx;
  }
  .category-list {
    flex: 1;
  }
  .category-scrollview {
    white-space: nowrap;
  }
  .category-item {
    display: inline-block;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    background-color: #f2f2f2;
    margin-right: 20rpx;
    color: #333;
    font-size: 28rpx;
  }
  .goods-list {
    flex: 1;
    margin-top: 20rpx;
  }
  .goods-item {
    margin-bottom: 10rpx;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    background-color: #f2f2f2;
    color: #333;
    font-size: 28rpx;
  }
</style>

ログイン後にコピー

上記のコードは、水平スクロールのカテゴリリストと、縦型の製品リスト。

3. ページ参照

uniapp では、カテゴリページを他のページに参照する必要があります。
他のページの vue ファイルでは、<navigator> タグを使用して「カテゴリ」ページを参照します。

<navigator url="/pages/category/category">
  分类导航
</navigator>

ログイン後にコピー

上記のコードは現在のページにボタンを表示し、ユーザーがボタンをクリックするとカテゴリページにジャンプします。

4. データ転送とページジャンプ

「カテゴリ」ページで、uni.navigateTo メソッドを使用して、選択したカテゴリデータを製品に転送します。リストページ。

methods: {
  selectCategory(category) {
    this.selectedCategory = category;
    uni.navigateTo({
      url: '/pages/goodsList/goodsList',
      success: (res) => {
        res.eventChannel.emit('selectedCategory', this.selectedCategory)
      }
    })
  }
}

ログイン後にコピー

「goodsList」ページでは、選択した分類データを受け取り、そのデータを使用して該当する商品リストを表示します。

mounted() {
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.on('selectedCategory', (data) => {
    this.selectedCategory = data
  })
},
data() {
  return {
    selectedCategory: {}
  }
}

ログイン後にコピー

上記のコードは、eventChannel を使用してページ間のデータ転送を実現しています。

結論:
この記事では、uniapp で製品分類ナビゲーションを実装する方法を紹介し、対応するコード例を示します。実際の開発では、必要に応じてページのレイアウトとスタイルを調整し、バックエンドインターフェイスに従って実際の製品分類データを取得できます。上記の内容がお役に立てば幸いです。コーディングを楽しんでください。

以上がuniappで商品分類ナビゲーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。