So implementieren Sie die Produktklassifizierungsnavigation in Uniapp

So implementieren Sie die Produktklassifizierungsnavigation in uniapp

Einführung: Mit der rasanten Entwicklung des mobilen Internets sind E-Commerce-Plattformen zu einem der wichtigsten Einkaufskanäle für Menschen geworden. Um die Benutzererfahrung zu verbessern und den Benutzern das schnelle Auffinden der benötigten Produkte zu erleichtern, ist die Produktkategorienavigation immer wichtiger geworden. In diesem Artikel wird die Implementierung der Produktkategorienavigation in uniapp vorgestellt und entsprechende Codebeispiele bereitgestellt.

1. Vorbereitung
Bevor wir beginnen, müssen wir folgende Arbeiten vorbereiten:

1. Ein Uniapp-Projekt, das mit Tools wie HBuilderX erstellt werden kann.
2. Produktkategoriedaten, einschließlich Kategoriename und entsprechende Produktliste.

2. Erstellen Sie eine Kategorieseite

1. Erstellen Sie eine Seite im Uniapp-Projekt und nennen Sie sie „Kategorie“.
2. Schreiben Sie in die Vue-Datei der Seite „Kategorie“ den folgenden Code:

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

Der obige Code implementiert eine Produktkategorie-Navigationsseite, einschließlich einer horizontal scrollenden Kategorieliste und einer vertikalen Produktliste.

3. Seitenverweis

1. In Uniapp müssen wir die Kategorieseite auf andere Seiten verweisen.
2. Verwenden Sie in den Vue-Dateien anderer Seiten das Tag <navigator>, um auf die Seite „Kategorie“ zu verweisen. <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

rrreee

Der obige Code zeigt eine Schaltfläche auf der aktuellen Seite an und wenn der Benutzer auf die Schaltfläche klickt, springt er zur Kategorieseite.

4. Datenübertragung und Seitensprung🎜🎜🎜Verwenden Sie auf der Seite „Kategorie“ die Methode uni.navigateTo, um die ausgewählten Kategoriedaten auf die Produktlistenseite zu übertragen. 🎜🎜rrreee

🎜Erhalten Sie auf der Seite „Warenliste“ die ausgewählten Kategoriedaten und verwenden Sie die Daten, um die entsprechende Produktliste anzuzeigen. 🎜🎜rrreee🎜Der obige Code verwendet eventChannel, um Daten zwischen Seiten zu übertragen. 🎜🎜Fazit: 🎜Dieser Artikel stellt die Implementierung der Produktkategorienavigation in uniapp vor und stellt entsprechende Codebeispiele bereit. In der tatsächlichen Entwicklung können Seitenlayout und -stil je nach Bedarf angepasst werden, und echte Produktklassifizierungsdaten können über die Back-End-Schnittstelle abgerufen werden. Ich hoffe, dass der obige Inhalt für Sie hilfreich ist und wünsche Ihnen viel Spaß beim Programmieren! 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Produktklassifizierungsnavigation in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!