Comment implémenter la navigation par classification de produits dans Uniapp

Comment implémenter la navigation par classification de produits dans uniapp

Introduction : Avec le développement rapide de l'Internet mobile, les plateformes de commerce électronique sont devenues l'un des principaux canaux permettant aux gens d'acheter. Afin d'améliorer l'expérience utilisateur et de permettre aux utilisateurs de trouver rapidement les produits dont ils ont besoin, la navigation par catégorie de produits est devenue de plus en plus importante. Cet article présentera comment implémenter la navigation par catégorie de produits dans uniapp et fournira des exemples de code correspondants.

1. Préparation
Avant de commencer, nous devons préparer le travail suivant :

1. Un projet uniapp, qui peut être créé à l'aide d'outils tels que HBuilderX.
2. Données sur la catégorie de produits, y compris le nom de la catégorie et la liste de produits correspondante.

2. Créez une page de catégorie

1. Créez une page dans le projet uniapp et nommez-la "catégorie".
2. Dans le fichier vue de la page "catégorie", écrivez le code suivant :

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

Le code ci-dessus implémente une page de navigation par catégorie de produits, comprenant une liste de catégories à défilement horizontal et une liste de produits verticale.

3. Référence de page

1. Dans uniapp, nous devons référencer la page de catégorie à d'autres pages.
2. Dans les fichiers vue des autres pages, utilisez la balise <navigator> pour référencer la page "catégorie". <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

Le code ci-dessus affichera un bouton sur la page actuelle, et lorsque l'utilisateur clique sur le bouton, il passera à la page de catégorie.

4. Transfert de données et saut de page🎜🎜🎜Dans la page "catégorie", utilisez la méthode uni.navigateTo pour transférer les données de la catégorie sélectionnée vers la page de liste de produits. 🎜🎜rrreee

🎜Dans la page "goodsList", recevez les données de la catégorie sélectionnée et utilisez les données pour afficher la liste de produits correspondante. 🎜🎜rrreee🎜Le code ci-dessus utilise eventChannel pour transférer des données entre les pages. 🎜🎜Conclusion : 🎜Cet article présente comment implémenter la navigation par catégorie de produits dans uniapp et fournit des exemples de code correspondants. Dans le développement réel, la mise en page et le style peuvent être ajustés en fonction des besoins, et des données réelles de classification des produits peuvent être obtenues selon l'interface back-end. J'espère que le contenu ci-dessus vous sera utile et bon codage ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!