1、功能说明

uniapp小程序展示商品分类

2、操作路径3、uniapp代码3.1、顶部搜索栏目

如上图，界面分为三部分，第一部分是搜索框，第二部是左侧一级菜单，第三部份是二级菜单。

<div class="index">      <view class="header acea-row row-center-wrapper">        <view @click="goGoodSearch()" class="search acea-row row-middle">          <text class="iconfont icon-xiazai5"></text>搜索商品        </view>      </view>    </div>

如上述代码是搜索框div

如上述第3行代码，绑定点击事件goGoodSearch

如上述第4行，class="iconfont icon-xiazai5" 使用阿里巴巴矢量图标库

一、什么是 IconFont？

顾名思义，IconFont 就是字体图标。严格地说，就是一种字体，但是，它们不包含字母或数字，而是包含符号和字形。您可以使用 CSS 设置样式，就像设置常规文本一样，这使得 IconFont 成为 Web 开发时图标的热门选择。

二、 IconFont的优点

可以方便地将任何 CSS 效果应用于它们。

因为它们是矢量图形，所以它们是可伸缩的。这意味着我们可以在不降低质量的情况下伸缩它们。

我们只需要发送一个或少量 HTTP 请求来加载它们，而不是像图片，可能需要多个 HTTP 请求。

由于尺寸小，它们加载速度快。

它们在所有浏览器中都得到支持（甚至支持到 IE6）。

三、 IconFont的不足

不能用来显示复杂图像

通常只限于一种颜色，除非应用一些 CSS 技巧

字体图标通常是根据特定的网格设计的，例如 16x16, 32×32, 48×48等。如果由于某种原因将网格系统改为25×25，可能不会得到清晰的结果

.productSort .header {  width: 100%;  height: 51px;  background-color: #fff;  position: fixed;  left: 0;  right: 0;  top: 0;  top: calc(0 + env(safe-area-inset-top));  z-index: 9;}

如上图header样式，宽100%，高度：51px，背景颜色是白色，位置是固定，其中定位左，右，其中顶部是通过计算获取高度，通过计算顶部的商品分类栏目位置

.index .header .search {    flex: 1;    box-sizing: border-box;    height: 34px;    background-color: #f7f7f7;    border-radius: 26px;    padding: 0 14px;    font-size: 14px;    color: #bbb;}

<view class="aside">      <view        class="item acea-row row-center-wrapper"        :class="categoryDivindex === navActive ? 'on' : ''"        v-for="(item, categoryDivindex) in category"        :key="categoryDivindex"        @click="asideTap(categoryDivindex)"      >        <text>{{ item.cateName }}</text>      </view>    </view>

如上述第5行代码，循环category，获取一级分类。

如上述第7行，点击事件asideTap，执行代码如下：

asideTap(index) {      this.navActive = index;    }

实现样式

.productSort .aside {    position: fixed;    width: 96px;    left: 0;    top: 51px;    bottom: 53px;    background-color: #f7f7f7;    overflow-y: auto;    overflow-x: hidden;    overflow-scrolling: touch;    padding-top: 46px;}

固定位置，宽是96px，left，左侧固定位置。

3.3.二级商品分类实现

<view class="conter">      <view v-for="(item, eq) in category" :key="eq">        <view class="listw" v-if="eq === navActive">          <view class="title acea-row row-center-wrapper" ref="title">            <view class="line"></view>            <view class="name">{{ item.cateName }}</view>            <view class="line"></view>          </view>          <view class="list acea-row">            <view              class="item acea-row row-column row-middle"              v-for="(child, categoryIndex) in item.children"              :key="categoryIndex"              @click="goGoodsList(child)"            >              <view class="picture">                <image :src="child.pic" />              </view>              <view class="name line1">{{ child.cateName }}</view>            </view>          </view>        </view>      </view>    </view>

如上述第2行代码。循环category二级商品分类。

如上述第3行代码，通过v-if="eq === navActive"，现在被选中一级分类下面的二级商品分类。

如上第10行代码，绑定点击事件goGoodsList，

如上述第17行代码，显示二级商品分类图片

如上述第19行代码，显示二级商品分类名称

3.4获取商品分类函数

 loadCategoryData() {      getCategory().then(res => {        this.category = res.data;        this.$nextTick(() => {          if (this.$yroute.query.id) {            this.activeCateId(this.$yroute.query.id);          }        });      });    },      import { getCategory } from "@/api/store";/* * 商品分类 * */export function getCategory() {	return request.get("/category", {}, {		login: false	});}

如上述第2行代码。调用getCategory函数获取后端javaapi接口数据。

其中引入的函数参考第11行代码。具体的路径是"@/api/store";

3.4获取商品分类函数

/** * 商品分类列表 */@AnonymousAccess@GetMapping("/category")@ApiOperation(value = "商品分类列表",notes = "商品分类列表")public ApiResult<List<CateDTO>> getYxStoreCategoryPageList(){    return ApiResult.ok(yxStoreCategoryService.getList());}

如上述第9行代码，获取商品分离

计划

1、ruoyi-flowable-plus工作流拆解

2、ruoyi-flowable-plus如何快速开发

3、电商项目源代码拆解

4、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。运行不起来可以联系我

码云地址：

Ruoyi-Plus: 本项目基于 RuoYi-Vue-Plus 进行二次开发扩展Flowable工作流功能，支持在线表单设计和丰富的工作流程设计能力。如果觉得这个项目不错，麻烦点个star。