search
HomeWeb Front-enduni-appHow to implement product classification navigation in uniapp

How to implement product classification navigation in uniapp

Introduction: With the rapid development of the mobile Internet, e-commerce platforms have become one of the main channels for people to shop. In order to improve user experience and facilitate users to quickly find the products they need, product category navigation has become increasingly important. This article will introduce how to implement product category navigation in uniapp and provide corresponding code examples.

1. Preparation work
Before starting, we need to prepare the following work:

  1. A uniapp project can be created using tools such as HBuilderX.
  2. Product classification data, including category name and corresponding product list.

2. Create a category page

  1. Create a page in the uniapp project and name it "category".
  2. In the vue file of the "category" page, write the following 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>

The above code implements a product category navigation page, including a horizontally scrolling category list and a Vertical product list.

3. Page Reference

  1. In uniapp, we need to reference the category page to other pages.
  2. In the vue files of other pages, use the <navigator></navigator> tag to reference the "category" page.
<navigator url="/pages/category/category">
  分类导航
</navigator>

The above code will display a button on the current page, and when the user clicks the button, it will jump to the category page.

4. Data transfer and page jump

  1. In the "category" page, use the uni.navigateTo method to transfer the selected category data to the product list page.
methods: {
  selectCategory(category) {
    this.selectedCategory = category;
    uni.navigateTo({
      url: '/pages/goodsList/goodsList',
      success: (res) => {
        res.eventChannel.emit('selectedCategory', this.selectedCategory)
      }
    })
  }
}
  1. In the "goodsList" page, receive the selected classification data and use the data to display the corresponding product list.
mounted() {
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.on('selectedCategory', (data) => {
    this.selectedCategory = data
  })
},
data() {
  return {
    selectedCategory: {}
  }
}

The above code uses eventChannel to realize data transfer between pages.

Conclusion:
This article introduces how to implement product classification navigation in uniapp, and provides corresponding code examples. In actual development, the page layout and style can be adjusted according to needs, and real product classification data can be obtained according to the back-end interface. I hope the above content is helpful to you, and happy coding!

The above is the detailed content of How to implement product classification navigation in uniapp. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
足球导航语音包在哪个导航软件足球导航语音包在哪个导航软件Nov 09, 2022 pm 04:33 PM

足球导航语音包在“高德导航”软件中,是高德地图车机版导航语音包的其中一种,内容为黄健翔足球解说版本的导航语音。设置方法:1、打开高德地图软件;2、点击进入“更多工具”-“导航语音”选项;3、找到“黄健翔热血语音”,点击“下载”;4、在弹出的页面,点击“使用语音”即可。

百度地图 App 最新版本 18.8.0 发布,首次引入红绿灯雷达功能,并新增实时停车推荐功能百度地图 App 最新版本 18.8.0 发布,首次引入红绿灯雷达功能,并新增实时停车推荐功能Aug 06, 2023 pm 06:05 PM

百度地图App安卓版/iOS版均已发布18.8.0版本,首次引入红绿灯雷达功能,业内领先据官方介绍,开启红绿灯雷达后,支持开车自动探测红绿灯,不用输入目的地,北斗高精可以实时定位,全国100万+红绿灯自动触发绿波提醒。除此之外,新功能还提供全程静音导航,使图区更简洁,关键信息一目了然,且无语音播报,使驾驶员更加专注驾驶百度地图于2020年10月上线红绿灯倒计时功能,支持实时读秒预判,导航会在接近红绿灯路口时,自动展示倒计时剩余秒数,让用户时刻掌握前方路况。截至2022年12月31日,红绿灯倒计时

导航地图上横着的8字是什么导航地图上横着的8字是什么Jun 27, 2023 am 11:43 AM

导航地图上横着的8字是霾,中度是黄色8预警信号,重度是橙色8预警信号。

如何使用PHP实现商品分类和筛选功能如何使用PHP实现商品分类和筛选功能May 21, 2023 pm 10:51 PM

随着越来越多的电子商务平台的出现,商品分类和筛选功能成为了一个成功的商业网站所必须的基本功能之一。在本文中,我们将介绍如何使用PHP实现商品分类和筛选的功能,让您的网站能够更加方便和易于使用。一、商品分类定义商品分类首先,你需要对商品进行分类。为了实现商品分类,您可以在数据库中定义一个商品类别表。此表包含类别的唯一标识符(ID)和类别名称。例如,您可以在数据

手把手教你uniapp和小程序分包(图文)手把手教你uniapp和小程序分包(图文)Jul 22, 2022 pm 04:55 PM

本篇文章给大家带来了关于uniapp跨域的相关知识,其中介绍了uniapp和小程序分包的相关问题,每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分,希望对大家有帮助。

高德地图推出升级版驾车 ETA 服务:实时解析当前路况,预估到达时间更精准高德地图推出升级版驾车 ETA 服务:实时解析当前路况,预估到达时间更精准Apr 30, 2024 am 08:37 AM

本站4月29日消息,高德地图官宣推出升级版的驾车ETA(本站注:ETA即预估到达时间,指的是用户在当前时刻出发按照给定路线前往目的地预计需要的时长)服务,该服务旨在帮助用户的路线规划时长和路况预估更为精准,辅助用户进行出行决策。该地图应用是最新升级的高德地图App,引入了“超大规模图卷积神经网络模型”,该模型可以更好地捕捉和学习交通流动规律,支持城市道路网络、高速公路系统,能以高精度刻画交通状况的时空动态变化。在此外,全新版本的地图还进一步融合了iTransformer时序预测模型,支持实时解析

uniapp中如何实现页面跳转和导航uniapp中如何实现页面跳转和导航Oct 20, 2023 pm 02:07 PM

uniapp中如何实现页面跳转和导航uniapp是一款支持一次编码多端发布的前端框架,它基于Vue.js,开发者可以使用uniapp快速开发移动端应用。在uniapp中,实现页面跳转和导航是非常常见的需求。本文将介绍uniapp中如何实现页面跳转和导航,并提供具体的代码示例。一、页面跳转使用uniapp提供的方法进行页面跳转uniapp提供了一组方法用于实现

MySQL表设计指南:创建一个简单的商品分类表MySQL表设计指南:创建一个简单的商品分类表Aug 03, 2023 pm 02:28 PM

MySQL表设计指南:创建一个简单的商品分类表在数据库设计中,良好的表设计是非常重要的,它直接影响到数据的存储和查询效率。本文将介绍如何创建一个简单的商品分类表,并提供相应的代码示例。一、表结构设计商品分类表主要包括以下字段:分类ID、分类名称、父分类ID。其中,分类ID是表的主键,分类名称存储分类的名称,父分类ID用于表示当前分类的父级分类。下面是商品分类

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)