Nissi商城首页（三）：仿唯品会的商品分类和品牌导航功能（完美）

Nissi商城首页（三）：仿唯品会的商品分类和品牌导航功能（完美）

一、前言

上一节实现了搜索和导航功能，代码层面也对静态数据统一管理，想要学习的可以看上一篇文章。

本节继续实现我们的Nissi商城首页的商品分类导航和 品牌导航。原始效果如下：

二、功能分析

从上面原始效果图可以看到一共有两个区域，商品的分类导航和商品的品牌导航。

商品分类导航：每一行有5个分类进行了平铺，每个包含2个元素（分类icon 和 分类名称）。

商品品牌导航：每行有4个类型进行了平铺，每个类型包含2个元素（导航icon 和 名称），组成一张卡片，每隔3秒钟翻转一次。

三、开发

1、代码目录结构

├─pages │ └─index │ index.js │ index.json │ index.wxml │ index.wxss

PS：继续在首页里面添加功能

2、代码片段

page/index/index.wxml 部分

{{item.name}} {{item.name}} {{item.name}}

page/index/index.js 部分

page/index/index.wxss 部分

/*=================商品分类导航-开始====================*/.goods-classify { display: flex; justify-content: left; flex-direction: row; flex-wrap: wrap; background-color: white; border-radius: 5%;}.goods-list { /* width: 18%; */ width: calc(100%/5); display: flex; align-items: center; flex-direction: column; padding: 30rpx 0; /* padding-top: 20rpx; */}.goods-list image { width: 80rpx; height: 80rpx; /* border-radius: 50%;设置边界圆角 */}.goods-list text { padding-top: 20rpx; font-size: 25rpx;}/*=================商品分类导航-结束====================*//*=================品牌分类导航-开始====================*/.brand-classify{ display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; margin-top: 20rpx;}.brand-list { position: relative; height: 180rpx; width: 170rpx;}.brand { background-color: white; position: absolute; transition: all 1s; /* 不显示背面 */ backface-visibility: hidden; border-radius: 10rpx; cursor: pointer; display: flex; align-items: center; flex-direction: column; width: 100%;}.brand image { width: 120rpx; height: 120rpx;}.brand text { font-size: 25rpx; margin-bottom: 15rpx;}.b1 {}.b2 { transform: rotateY(-180deg);}/*=================品牌分类导航-结束====================*/

此处省略样式部分代码块......可以看源码！

三、结果

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。