一、前言

上一节实现了搜索和导航功能，代码层面也对静态数据统一管理，想要学习的可以看上一篇文章。Nissi商城首页（二）：仿唯品会的搜索和导航栏功能（完美）https://blog.csdn.net/zhenghhgz/article/details/125698547

本节继续实现我们的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 部分

        <view class="goods-classify">
          <block wx:for-items="{{tabGoodsList}}" wx:key="name">
            <view class="goods-list" data-type="{{item.id}}" data-typeid="{{item.id}}">
              <image src="{{item.icon}}" />
              <text>{{item.name}}text>
            view>
 
          block>
        view>
        
        <view class="brand-classify">
          <view class="brand-list" wx:for-items="{{tabBrandList}}" wx:key="id">
            <view class="brand b1" data-type="{{item.id}}" data-typeid="{{item.id}}" animation="{{animationZ}}">
              <image src="{{item.icon}}" />
              <text>{{item.name}}text>
            view>
 
            <view class="brand b2" data-type="{{item.id}}" data-typeid="{{item.id}}" animation="{{animationF}}">
              <image src="{{item.icon}}" />
              <text>{{item.name}}text>
            view>
          view>
        view>

 page/index/index.js 部分

onLoad: function (options) {
    var defaultTab = this.data.tabList[0];
     //加载商品分类导航
     this.goodsListShow(defaultTab.id);
     //加载品牌分类导航
    this.brandListShow(defaultTab.id);
    //每3秒钟翻转一次品牌分类
    // this.brandListTime(this.data.pointId); 
  },
goodsListShow: function (e) {
    var tabGoodsList = indexData.tabGoodsList[e];
    console.log("classify="+e);
    this.setData({
      tabGoodsList: tabGoodsList
    })
  },
brandListShow: function (e) {
    var tabBrandList = indexData.tabBrandList[e];
    console.log("brand="+e);
    this.setData({
      tabBrandList: tabBrandList
    })
  },
rotateFn(pointId) {
    let that = this
    // let id = e;
    // 点击正面
    if (pointId == 1) {
      this.setData({
        animationZ: that.animation.rotateY(180).step().export(),
        animationF: that.animation.rotateY(0).step().export(),
        pointId: 2
      })
    } else { //点击反面
      this.setData({
        animationZ: that.animation.rotateY(0).step().export(),
        animationF: that.animation.rotateY(180).step().export(),
        pointId: 1
      })
    }
  },
  brandListTime : function() {
    this.data.Interval = setInterval(() => {
      var pointId = this.data.pointId;
      console.log("pointId="+pointId);
      this.rotateFn(pointId);
      this.setData({
        Numbers: ++this.data.Numbers
      })
    }, 3000);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  animation: wx.createAnimation({
    duration: 1000,
    timingFunction: 'linear'
  }),

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);
}
/*=================品牌分类导航-结束====================*/

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

三、结果

 四、源码
Nissi商城微信小程序: NissI商城微信小程序：主要是提供给前端开发人员学习的电商项目，为了达到真实业务场景整体风格借鉴了“唯品会特卖”商城，小编会不断更新并丰富功能。如果有想要学习小程序的同学，可以加入进来一起开发。语言：微信小程序原生https://gitee.com/itunion/nissi-mall-wechat-applet