如何在uniapp中實現商品分類導航

如何在uniapp中實現商品分類導航

導語：隨著行動網路的快速發展，電商平台成為了人們購物的主要管道之一。為了提高使用者體驗和方便使用者快速找到所需商品，商品分類導航變得越來越重要。本文將介紹如何在uniapp中實現商品分類導航，並提供對應的程式碼範例。

一、準備工作
在開始之前，我們需要準備以下工作：

1. 一個uniapp項目，可以使用HBuilderX等工具建立。
2. 商品分類數據，包括分類名稱和對應的商品清單。

二、建立分類頁面

1. 在uniapp專案中建立一個頁面，命名為「category」。
2. 在「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>

以上程式碼實作了一個商品分類導航的頁面，包含一個橫向捲動的分類清單和一個縱向的商品清單。

三、頁面引用

1. 在uniapp中，我們需要將分類頁面引用到其他頁面。
2. 在其他頁面的vue檔案中，使用<navigator>標籤來引用「category」頁面。

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

以上程式碼將在目前頁面中顯示一個按鈕，當使用者點擊按鈕時將跳到分類頁面。

四、資料傳遞和頁面跳躍

1. 在「category」頁面中，使用uni.navigateTo方法將選取的分類資料傳遞給商品列表頁面。

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

2. 在「goodsList」頁面中，接收選取的分類數據，並使用該數據展示對應的商品清單。

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

以上程式碼透過使用eventChannel#來實現頁間的資料傳遞。

結語：
本文介紹如何在uniapp中實作商品分類導覽的方法，並提供了對應的程式碼範例。在實際開發中，可以根據需求對頁面佈局和樣式進行調整，並根據後端介面取得真實的商品分類資料。希望以上內容對你有幫助，祝愉快的程式設計！

以上是如何在uniapp中實現商品分類導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！